作者：EmilHein译者：前端小智来源：betterprogramming有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。自从我开始使用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中添加即可，比Vueximport{createPinia}from'pinia'app.use(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支持代码更简洁，可以很好的实现自动代码切分Pinia用户还是很多的，详情请参考官方文档Pinia(vuejs.org)代码部署后可能存在BUG无法实时获知。事后为了解决这些BUG，花了不少时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。见谅：https://betterproramming.pub/...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
