自从开始使用Vue3和组合API，我也尝试过使用Pinea作为状态管理库。如果你是从vue2和vuex过来的，你会觉得在用法上还是有很大区别的。老实说，我还是不太习惯Vuex。最初，有“很多”样板代码，只是为了降低商店的使用率。但是，状态管理确实给我们带来了遍历，尤其是当我们有一小块状态应该跨组件共享的时候，我们更倾向于使用它。我们先来看看Vuex和Pinia的整体设计以及它们之间的区别。下面是官方给出的Vuex的工作原理图。刚开始学习的时候，第一眼看的时候很迷茫，但是当我用过时的项目开发一个项目的时候，一眼就明白了。在Vuexstore（仓库）中，主要有4个组件。1.状态这只是一个包含实际状态的对象。我们可以在开发工具中看到这个状态，如果我们想保留这个状态用于缓存或其他目的，就可以保存对象。2.ActionsActions是一个执行异步任务的函数。它们由关键字dispatch启动。操作通常调用外部API或执行其他一些异步工作。它还负责调用适当的突变以实际更改状态。这表明动作本身不会改变状态，但提交会改变，从而允许突变改变状态。3.MutationsMutation是唯一真正同步改变状态的函数。突变使用关键字commit。4.GettersGetters可以被认为是计算属性，应该用于从状态中获取修改后的响应。一个简单的Vuex存储示例如下所示：conststore=createStore({state:{count:0},mutations:{increment(state){state.count++}},actions:{increment(context){context.commit('increment')}}})在使用store处理上述问题时，组件通常会调用dispatch来启动一个异步任务（比如从外部API获取）。如果需要改变状态，比如简单的计数器，可以调用commit。这意味着组件可以通过调用dispatch或commit与store交互。我不了解你，但对我来说，它增加了一些我并不真正需要的精神负担。在使用Vuex之前，我对“提交”和“调度”这两个术语并不熟悉。出于这个原因，使用它们来改变状态对我来说并不直观。这对某些人来说可能有所不同，但这让我对使用动作或突变感到有点不舒服。还值得注意的是，使用Vuex，组件可以访问整个商店，尽管逻辑上将Vuex商店分成不同的文件。与Vuex相比，Pinia的工作原理图如下：整体架构比Vuex更简单易懂。Piniastore有3个主要组件：1.State的定义与Vuex相同。2.Actions这里的Actions和Vuex中的Actions和mutations一样工作。这些函数是改变状态的唯一方法。如果您想从外部API获取数据并更新状态，也可以使用操作。另外一个和vuex设置不同的是，Pinia的action是普通函数，精神负担比vuex小很多。3.gettersgetter正好等同于Store状态的computed属性。一个简单的Pinia存储示例如下所示：exportconstuseStore=defineStore('main',{state:()=>({counter:0,}),actions:{increment(){this.counter++}}})如果有多个模板，Vuex一般采用modules的方式，需要通过store/index.ts中的creaeStore将所有的模块注册到store中，那么Pinia就省去了这些麻烦，直接createPinia()即可，不需要注册模块，而且没有任何参数，所以你甚至不需要store/index.ts，直接在main.ts中添加即可，比Vuex简单多了。从'pinia'app.use（createPinia（））导入{createPinia};#main.tsimport{createApp}from'vue'importAppfrom'./App.vue'import{createPinia}from'pinia'constapp=createApp(App)app.use(createPinia())app.mount('#app')总结目前，我认为Pinia更易于理解和使用。也许有一些东西可以让Vuex在更大的项目中更好地扩展，但我还没有遇到过。对我来说另一件重要的事情是我们可以调用带有普通参数的普通操作方法。Pinia还开箱即用地支持Vue2和3，这使得迁移更加容易。优点最后总结一下Pinia的优点：Vue2和Vue3都支持。更小，只有1KB。不需要嵌套模块，符合Vue3的Compositionapi，让代码更扁平。放弃Mutations的操作，只有state，getters和actions。它极大地简化了状态管理库的使用和完整的TypeScript支持。代码更加简洁，可以很好的实现自动代码切分。
