持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

写在前面: 在vue3项目中使用到了pinia作为vue项目的状态管理库,替代掉了vuex,记录总结一下基础使用方法以及一些注意事项.

事关我对于pinia的使用那些事

Pinia和vuex的区别

个人觉得pinia和使用了命名空间的vuex有点像,代码分割以及模块化,降低耦合度

Pinia的优势

• 支持vue2和vue3 , 同时亲和vue3语法,符合 Vue3 的 Composition api的理念 支持typescript.

• 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库.

Pinia的使用

安装

    npm i pinia -s

引入

   import { createPinia } from "pinia";
   
   createApp(App).use(createPinia());

使用

    // store.ts
    import { defineStore, acceptHMRUpdate } from "pinia";


    export const useDialogStore = defineStore({
     id: "Dialog",
     state: () => ({
       dialogVisible: false,
       XY: [0, 0],
       DiaInfo: {} as any,
       title: "详细信息",
     }),
     getters:{
     
     },
     actions: {
       setDialogVisible(dialogVisible: boolean) {
         this.$patch({
           dialogVisible,
         });
       },
       setXY(XY: Array<any>) {
         this.$patch({
           XY,
         });
       },
       async setDialogInfo(DiaInfo: any) {
         this.$patch({
           DiaInfo,
         });
       },
       setTitle(title: string) {
         this.$patch({
           title,
         });
       },
     },
   });

组件中调用

   import { useDialogStore } from "@/stores/dialog"; //vue文件引入导出
   
   
   let dialogStore = useDialogStore(); // 调用函数获取实例
   console.log(dialogStore.title) // 详细信息
   dialogStore.setTitle() // 方法调用
   

修改数据内容

$patch方法可以接受两个类型的参数，函数 和 对象;

• $patch + 对象
• $patch + 函数  通过函数方式去使用的时候，函数接受一个 state 的参数，state 就是 store 仓库中的 state

    // 单条修改
    import { useDialogStore } from "@/stores/dialog"; //vue文件引入导出
   
    let dialogStore = useDialogStore(); // 调用函数获取实例
    dialogStore.title = "详细信息123" // 详细信息123
    
    // 多条修改 Plan A
    dialogStore.title = "详细信息xyz" // 详细信息xyz
    dialogStore.XY = [50,100] // [50,100]
    
    // 多条修改 Plan B
        // store.ts
    actions: {
        setInfo(title:string,XY:[string,string]){
          this.$patch({
           state.title = title;
           state.XY = XY;
         });
        },
    }
        // 组件内
    dialogStore.setInfo();
    
    // 多条修改 Plan C
     const setInfo = (title:string,XY:[string,string]) => {
      dialogStore.$patch((state) => {
          state.title = title;
          state.XY = XY;
      });
    }
        
    dialogStore.setInfo();
    

应该挺好懂的,和vuex的state和mutation的用法差不多

解构赋值

// es语法解构会失去响应式
    import { useDialogStore } from "@/stores/dialog"; 
   
   
   let dialogStore = useDialogStore(); // 使用导出函数
   let {title,DiaInfo} = dialogStore // 详细信息
   
//  storeToRefs语法解构
    import { useDialogStore } from "@/stores/dialog"; 
    import { storeToRefs } from "pinia"    
   
   let dialogStore = useDialogStore(); // 使用导出函数
   let {title,DiaInfo} = storeToRefs(dialogStore) // 详细信息

End