简介Pinia是一个轻量级的Vue.js状态管理库，最近很火。它使用Vue3中新的响应式系统来构建一个直观且完全类型化的状态管理库。Pinia的成功可归功于其管理存储数据的独特能力（可扩展性、存储模块组织、状态更改分组、多存储创建等）。另一方面，Vuex也是为Vue框架打造的一个流行的状态管理库，也是Vue核心团队推荐的状态管理库。Vuex非常注重应用程序的可扩展性、开发人员的人体工程学和信心。它基于与Redux相同的流架构。在这篇文章中，我们将比较Pinia和Vuex。我们将分析这两个框架的设置、社区优势和性能。我们还将看看Vuex5与Pinea2相比有哪些新功能。设置Pinia设置Pinia很容易上手，因为它只需要安装和创建一个商店。要安装Pinia，您可以在终端中运行以下命令：yarnaddpinia@next#或使用npmnpminstallpinia@next此版本与Vue3兼容，如果您正在寻找与Vue2.x兼容的版本，请查看v1分支。Pinia是Vue3CompositionAPI的包装器。所以你不必将它初始化为插件，除非你需要Vuedevtools支持、SSR支持和webpack代码拆分案例：//app.jsimport{createPinia}from'pinia'app.use(createPinia())上面片段，您将Pinia添加到您的Vue.js项目，这样您就可以在您的代码中使用Pinia的全局对象。要创建商店，您可以使用包含创建基本商店所需的状态、操作和获取器的对象调用defineStore方法。//stores/todo.jsimport{defineStore}from'pinia'exportconstuseTodoStore=defineStore({id:'todo',state:()=>({count:0,title:"Cooknoodles",done:false})})Vuex设置Vuex也很容易设置，需要安装和创建商店。要安装Vuex，您可以在终端中执行以下命令：npminstallvuex@next--save#或使用yarnyarnaddvuex@next--save要创建商店，您可以使用包含状态、操作和getter对象调用createStore方法：//store.jsimport{createStore}from'vuex'constuseStore=createStore({state:{todos:[{id:1,title:'...',done:true}]},getters:{doneTodos(state){returnstate.todos.filter(todo=>todo.done)}}})要访问Vuex全局对象，需要在Vue.js项目根文件中添加Vuex，如如下：//index.jsimport{createApp}from'vue'importAppfrom'./App.vue'import{useStore}from'./store'createApp(App).use(store).mount('#app')使用Pinia使用Pinia，store可以访问如下：),}},})请注意，当访问其属性。Vuex使用Vuex，可以通过如下方式访问store：import{computed}from'vue'exportdefault{setup(){conststore=useStore()return{//访问计算函数中的状态count:computed(()=>store.state.count),//在计算函数中访问getterdouble:computed(()=>store.getters.double)}}}社区和生态系统的力量在撰写本文时，Pinia的社区很小，这导致在StackOverflow上的贡献和解决方案很少。自Pinia去年初流行以来，目前正在取得进展，其社区正在迅速壮大。希望很快会有更多的贡献者和解决方案出现在Pinia上。Vuex是Vue.js核心团队推荐的状态管理库。它拥有庞大的社区，核心团队成员做出了重大贡献。在StackOverflow上很容易找到Vuex错误的解决方案。学习曲线和文档这两个状态管理库都相当容易学习，因为它们在YouTube和第三方博客上有很好的文档和学习资源。对于以前使用过Flux架构库（如Redux、MobX、Recoil等）的开发人员来说，学习曲线更容易。这两个库的文档都非常出色，并且以对经验丰富的开发人员和新开发人员都友好的方式编写。GitHub评级在撰写本文时，Pania有两个主要版本：v1和v2，其中v2在GitHub上拥有超过1600颗星。鉴于它最初于2019年发布并且相对较新，它无疑是Vue.js生态系统中增长最快的状态管理库之一。同时，自Vuex创建之日起，Vuex库已经发布了五个稳定版本。虽然v5是实验性的，但Vuex的v4是迄今为止最稳定的版本，在GitHub上有大约26.3k星。性能Pinia和Vuex都非常快，在某些情况下，使用Pinia的Web应用程序会比使用Vuex更快。这种性能提升可归因于Pinia的极轻重量，其大小约为1KB。尽管Pinia是在Vuedevtools的支持下构建的，但仍然不支持一些功能，如时间旅行和编辑，因为Vuedevtools没有公开必要的API。当开发速度和调试对您的项目更重要时，这一点值得注意。比较Pinia2和Vuex4Pinia将这些与Vuex3和4进行比较：突变不再存在。它们通常被认为非常冗长。他们最初带来了devtools集成，但这不再是问题。无需创建自定义复杂包装器来支持TypeScript，所有内容都是类型化的，并且API的设计方式尽可能地利用TS类型推断。这些是Pinia在其状态管理库与Vuex的比较中的额外见解：Pinia不支持嵌套存储。相反，它允许您根据需要创建商店。但是，仍然可以通过在另一个商店中导入和使用一个商店来隐式嵌套商店。商店在定义时会自动命名。因此，无需显式命名模块。Pinia允许您设置多个商店并让您的捆绑程序代码自动将它们拆分this.$patch((state)=>{state.posts.push(post)state.user.postsCount++}).catch(error){this.errors.push(error)}将是Pinia2（目前处于alpha阶段）与Vuex相比，我们可以推断Pinia领先于Vuex4。Vue.js核心团队为Vuex5制作了一个开放的RFC，类似于Pinia使用的一个。目前，Vuex使用RFC来收集尽可能多的社区反馈。希望Vuex5的稳定版本能够超越Pinea2。根据Pinia的创建者（EduardoSanMartinMorote）的说法，他也是Vue.js核心团队的成员并积极参与Vuex的设计，Pania和Vuex有相同点多于不同点：Pinia试图尽可能接近Vuex的哲学。它旨在测试Vuex下一次迭代的提案，它是成功的，因为我们目前有一个针对Vuex5的开放RFC，其API与Pinea使用的API非常相似。我个人对这个项目的意图是重新设计使用全局商店的体验，同时保持Vue平易近人的理念。我保持Pinea的API与Vuex保持一致，因为它不断向前发展，使人们可以轻松迁移到Vuex，甚至在将来合并这两个项目（在Vuex下）。虽然Pinia足以替代Vuex，但替代Vuex并不是它的目标，所以Vuex仍然是Vue.js应用推荐的状态管理库。Vuex和Pinia的优点和缺点Vuex的优点支持时间旅行和编辑等调试功能适用于大型、高复杂度的Vue.js项目Vuex的缺点从Vue3开始，getter的结果不像计算属性那样被缓存Vuex4有是一些与类型安全相关的问题。Pinia的优势完整的TypeScript支持：添加TypeScript比在Vuex中添加TypeScript更容易极其轻量级（大小约1KB）Store操作作为常规函数调用进行调度，而不是使用调度方法或MapAction辅助函数，这在Vuex中很常见支持多个Stores支持Vuedevtools、SSR和webpackcodesplittingPinia的缺点不支持时间穿越和编辑等调试特性什么时候用Pinia，什么时候用Vuex根据我个人的经验，由于Pinea重量轻，体积小，它是适用于中小型应用。它也适用于低复杂度的Vue.js项目，因为仍然不支持一些调试功能，如时间旅行和编辑。将Vuex用于中小型Vue.js项目是过分的，因为它是重量级的并且对性能下降有很大影响。因此，Vuex适用于大型、高复杂度的Vue.js项目。
