Vue 中 pinia 的使用

文章目录

• 前言
• 一、pinia是什么？
• 二、使用步骤
  • 1.安装方法
  • 2.引入注册vue3
• 总结

---

前言

pinia 全局状态管理工具

一、Pinia是什么？

pinia 全局状态管理工具

Pinia.js 有如下特点：

• 完整的 ts 的支持；

• 足够轻量，压缩后的体积只有1kb左右;

• 去除 mutations，只有 state，getters，actions；

• actions 支持同步和异步；

• 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的

• 无需手动添加 store，store 一旦创建便会自动添加；

• 支持Vue3 和 Vue2

二、使用步骤

1.安装方法：

yarn add pinia
npm install pinia -s

2.引入注册Vue3

main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
 
const store = createPinia()
let app = createApp(App)
 
 
app.use(store)
 
app.mount('#app')

3.vue2中使用

main.js:

import { createPinia, PiniaVuePlugin } from 'pinia'
 
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
 
new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

//组件中使用
<template>
  <div>
    <button @click="changeVuex">拿pinia数据</button>
    <br />
    {{ test.data }}
  </div>
</template>

<script>
//导入
import { Test } from "@/store";
export default {
  props: {},
  data() {
    return {
        //创建pinia实例
      test: Test(),
    };
  },
  methods: {
    changeVuex() {
      console.log(this.test.data);
      this.test.changeData();
    },
  },
  components: {},
};
</script>

<style scoped lang="less"></style>

初始化仓库Store，使用仓库中的数据

1、src下新建一个文件夹Store

2、Store/新建文件index.ts

3、index.ts中定义仓库Store

import { defineStore } from 'pinia'


// Names 枚举 是为了定义一组数据  挡在defineStore中 作为唯一的值
 enum Names {
    Test1='Test1'
}
// defineStore（a,b）  a是给仓库绑定一个唯一的值，b是配置项，类型是对象，有三个参数 state,getters,actions
export const Test = defineStore(Names.Test1, {
    state: () => {
        return {
            current: 1,
            name:'张三'
        }
    },
    // 相当于一个计算属性 可以在不修改state值的情况下 对值进行一些操作
    getters: {
        
    },
    //可以进行同步异步的提交
    actions: {
        
    }
})

 在组件中使用Test仓库（Vue3为例）

<template>
  <div>
<!-- 3、使用仓库中的数据 -->
    <span> {{ testStore.current }}====={{ testStore.name }} </span>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
//1、导入pinia store
import { Test } from "./store";
export default defineComponent({
  setup() {
    //2、获取Test仓库中对象
    let testStore = Test();

    return {
      testStore,
    };
  },
});
</script>

 pinia中修改state中数据的五种方式

<template>
  <div>
    <h4>修改仓库中的数据:{{ testStore.test }}</h4>
    <h4>修改仓库中的数据:{{ testStore.num }}</h4>
    <button @click="changeNum">点击</button>
  </div>
</template>
<script lang="ts">
// 1. 引入Pinia  store
import { Test } from "../store";
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(props, context) {
    //2.获取Test仓库中对象
    let testStore = Test();
    console.log(testStore);
    console.log(testStore.test);

    function changeNum() {
      // (1) 改变state数据  (直接修改)
      testStore.num++;

      // (2) 使用$patch 批量修改  $patch({修改的属性1:值，修改的属性2:值})
      testStore.$patch({
        test: "张三66",
        num: 250,
      });

      // (3) 使用$patch(函数形式触发)
      testStore.$patch((state) => {
        state.test += "~~!!";
        state.num += 50;
      });

      // (4) 使用原始$state 修改 但state中的所有属性必须全部修改
      testStore.$state = {
        test: "毕云涛",
        num: 199,
      };

      // (5) 通过actions 修改
      testStore.modify();
    }
    return {
      changeNum,
      testStore,
    };
  },
});
</script>
<style lang="less" scoped></style>

调用actions进行异步修改

import { defineStore } from "pinia";
// defineStore(a,b) a是仓库绑定唯一的值 , 一般是id  ，b是配置项，类型是对象，有三个参数 state,getters,actions
const Test1 = "Test1";

// 异步修改
const actionsAsync = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        test: "异步修改了",
        num: 111,
      });
    }, 2000);
  });
};
export const Test = defineStore(Test1, {
  state: () => {
    return {
      test: "测试数据",
      num: 100,
    };
  },
  // pinia里的 actions 支持同步修改状态也支持异步修改状态
  actions: {
    // 定于actions
    modify() {
      this.num += 100;
    },
    // 异步
    async asyncModify() {
      let res = (await actionsAsync()) as any;
      console.log(typeof res);
      this.test = res.test;
      this.num = res.num;
    },
  },
  getters: {
    newTest(): any {
      return this.test + "~~";
    },
    newNum: (state) => {
      return ++state.num;
    },
  },
});


组件中使用：
<template>
  <div>
    <button @click="asyncChangeNum">点击异步修改actions</button>
  </div>
</template>
<script lang="ts">
// 1. 引入Pinia  store
import { Test } from "../store";
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(props, context) {
    //2.获取Test仓库中对象
    let testStore = Test();
    console.log(testStore);
    console.log(testStore.test);

    // 异步修改actions
    function asyncChangeNum() {
      testStore.asyncModify();
    }

    return {
      testStore,
      asyncChangeNum,
    };
  },
});
</script>
<style lang="less" scoped></style>

调用getters

// 相当于一个计算属性 可以在不修改state值的情况下 对值进行一些操作
    getters: {
        newName():string {
            return `${this.newCurrent}---${this.name +='~'}`
        },
        newCurrent: (state) => {
            return '$'+ ++state.current;
        }
    },

使用：
 <p>getters中newName:{{ testStore.newName }}</p>
   <p>getters中newCurrent:{{ testStore.newCurrent }}</p>

总结

官方文档Pinia：Pinia

git 地址： https://github.com/vuejs/pinia