Pinia相比vuex，少了mutations，并更加方便，且actions同步异步都支持，而vuex中actions只支持异步。

• 使用Pinia的流程：

  • 在vue项目的入口文件中引入createPinia，并挂载于app上

  • 创建项目结构中的store文件夹用来存放数据，引入defineStore，第一个参数为ID （全局唯一） ，第二个参数为一个对象，里面可以包含state、actions、getters；其中state必须是一个函数，而不是vuex中的对象形式，目的是防止数据污染，需要用return返回对象。箭头函数是为了更好的适配TS，使其能够判断类型。actions和getters均为对象形式。

  • 组件中引入仓库文件，并调用该函数，赋值给一个常量。

    state

    • 类似于data

    • 需要在使用的组件中引入目标store，然后将函数的结果付给store（可更换），以下都使用store

    • 修改和读取值较少时，直接使用store.xxx即可。解构仓库中的数据必须使用storeToRefs，否则解构出的数据将会失去响应式，因为仓库其实是经过reactive包装的，并且这样解构之后在script中访问必须加上.value

    • 另一种方法就是store.$patch()

      1. 传入对象形式，这种方式为多次修改，一次提交。

         • 缺点：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要创建一个新集合 [来自官方]

          // store是组件中一个变量，接受了引入的仓库的结果
          store.$patch({
            counter: store.counter + 1,
            name: 'Abalam',
          })
         复制代码

      2. 传入箭头函数 （推荐使用）

         扫描二维码关注公众号，回复： 14326359 查看本文章

          // store是组件中一个变量，接受了引入的仓库的结果
          store.$patch((state) => {
            state.items.push({ name: 'shoes', quantity: 1 })
            state.hasChanged = true
          })
         复制代码

    • 替换某个仓库全部的状态，使用store.$state

       store.$state = { counter: 666, name: 'Paimon' }
      复制代码

    • 修改整个项目的仓库，使用pinia.state.value={}

       pinia.state.value = {}
      复制代码

    actions

    • 类似于method

    • 可以像方法一样直接在组件中被调用store.xxxx()

    • actions支持异步和同步，在仓库中定义后，使用this可以访问到state

    • 若使用其他store的数据，只需内部引用即可

       actions: {
           method01() {
             // 外部store
             const other = useOtherStore()
           },
       }
      复制代码

    getters

    • 类似于computed，有缓存

    • 可以传入state，也可以不传，使用this，但在TS中，传入state才可以进行类型推导，所以也可以传入state而不去使用它，而是使用this。

    •  getters: {
           doubleCount(state) {
             return state.counter * 2
           },
         },
      复制代码

    • 访问其他

      1. 其他getters（同一个store）：使用this访问即可

      2. 其他store的getters：要在内部引用

         

  • 像vuex的modules一样分类存储，只需多创建几个仓库文件，在组件内按需引用即可，若一个仓库用到了另一个仓库的数据，也同样需要引用。