Pinia与Vuex的对比：Pinia是Vuex的良好替代品吗？

介绍

Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站制作、成都网站建设、外贸营销网站建设、软件开发、设计服务业务。我们始终坚持以客户需求为导向，结合用户体验与视觉传达，提供有针对性的项目解决方案，提供专业性的建议，创新互联建站将不断地超越自我，追逐市场，引领市场！

Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。

另一方面，Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队推荐的状态管理库。Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Redux相同的流量架构。

在这篇文章中，我们将对Pinia和Vuex进行比较。我们将分析这两个框架的设置、社区优势和性能。我们还将看一下Vuex 5与Pinea 2相比的新变化。

设置

Pinia 设置

Pinia 很容易上手，因为它只需要安装和创建一个store。

要安装 Pinia，您可以在终端中运行以下命令：

 
 
   
  
  yarn add pinia@next   
  
  # or with npm   
  
  npm install pinia@next

该版本与Vue 3兼容，如果你正在寻找与Vue 2.x兼容的版本，请查看v1分支。

Pinia是一个围绕Vue 3 Composition API的封装器。因此，你不必把它作为一个插件来初始化，除非你需要Vue devtools支持、SSR支持和webpack代码分割的情况：

 
 
   
  
  //app.js   
  
  import { createPinia } from 'pinia'   
  
  app.use(createPinia())

在上面的片段中，你将Pinia添加到Vue.js项目中，这样你就可以在你的代码中使用Pinia的全局对象。

为了创建一个store，你用一个包含创建一个基本store所需的states、actions和getters的对象来调用 defineStore 方法。

 
 
   
  
  // stores/todo.js   
  
  import { defineStore } from 'pinia'   
  
     
  
  export const useTodoStore = defineStore({   
  
    id: 'todo',   
  
    state: () => ({ count: 0, title: "Cook noodles", done:false })   
  
  })

Vuex 设置

Vuex 也很容易设置，需要安装和创建store。

要安装Vuex，您可以在终端中执行以下命令：

 
 
   
  
  npm install vuex@next --save   
  
  # or with yarn   
  
  yarn add vuex@next --save

要创建store，你可以使用包含创建基本store所需的states、actions和 getter 的对象调用 createStore 方法：

 
 
   
  
  //store.js   
  
  import {createStore} from 'vuex'   
  
  const useStore = createStore({   
  
    state: {   
  
      todos: [   
  
        { id: 1, title: '...', done: true }   
  
      ]   
  
    },   
  
    getters: {   
  
      doneTodos (state) {   
  
        return state.todos.filter(todo => todo.done)   
  
      }   
  
    }   
  
  })

要访问 Vuex 全局对象，需要在 Vue.js 项目根文件中添加 Vuex，如下所示：

 
 
   
  
  //index.js   
  
  import { createApp } from 'vue'   
  
  import App from './App.vue'   
  
  import {useStore} from './store'   
  
  createApp(App).use(store).mount('#app')

使用

Pinia使用

使用 Pinia，可以按如下方式访问该store：

 
 
   
  
  export default defineComponent({   
  
    setup() {   
  
      const todo = useTodoStore()   
  
     
  
      return {   
  
        // 只允许访问特定的state   
  
        state: computed(() => todo.title),   
  
      }   
  
    },   
  
  })

请注意，在访问其属性时省略了 store 的 state 对象。

Vuex使用

使用Vuex，可以按如下方式访问store：

 
 
   
  
  import { computed } from 'vue'   
  
  export default {   
  
    setup () {   
  
      const store = useStore()   
  
     
  
      return {   
  
        // 访问计算函数中的状态   
  
        count: computed(() => store.state.count),   
  
     
  
        // 访问计算函数中的getter   
  
        double: computed(() => store.getters.double)   
  
      }   
  
    }   
  
  }

社区和生态系统的力量

在撰写本文时，Pinia 的社区很小，这导致 Stack Overflow 上的贡献很少，解决方案也很少。

由于 Pinia 于去年年初开始流行，并且目前取得了进展，因此其社区正在快速增长。希望很快会有更多的贡献者和解决方案出现在 Pinia 上。

Vuex 是 Vue.js 核心团队推荐的状态管理库，拥有庞大的社区，核心团队成员做出了重大贡献。Stack Overflow 上很容易找到 Vuex 错误的解决方案。

学习曲线和文档

这两个状态管理库都相当容易学习，因为它们在 YouTube 和第三方博客上都有很好的文档和学习资源。对于以前有使用 Redux、MobX、Recoil 等 Flux 架构库经验的开发人员来说，他们的学习曲线更容易。

这两个库的文档都很棒，并且以对经验丰富的开发人员和新开发人员都友好的方式编写。

GitHub 评分

在撰写本文时，Pania 有两个主要版本：v1 和 v2，其中 v2 在 GitHub 上拥有超过 1.6k 星。鉴于它最初于 2019 年发布并且相对较新，它无疑是 Vue.js 生态系统中增长最快的状态管理库之一。

同时，从 Vuex 创建之日到现在，Vuex 库已经发布了五个稳定版本。尽管 v5 处于实验阶段，但 Vuex 的 v4 是迄今为止最稳定的版本，在 GitHub 上拥有大约 26.3k 星。

性能

Pinia和Vuex都非常快，在某些情况下，使用Pinia的web应用程序会比使用Vuex更快。这种性能的提升可以归因于Pinia的极轻的重量，Pinia体积约1KB。

尽管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools没有暴露出必要的API，所以一些功能如时间旅行和编辑仍然不被支持。当开发速度和调试对你的项目来说更重要时，这是值得注意的。

比较 Pinia 2 和 Vuex 4

Pinia 将这些与 Vuex 3 和 4 进行了比较：

突变不再存在。他们经常被认为非常冗长。他们最初带来了 devtools 集成，但这不再是问题。
无需创建自定义的复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能地利用 TS 类型推断。

这些是Pinia在其状态管理库和Vuex之间的比较中提出的额外见解：

Pinia 不支持嵌套存储。相反，它允许你根据需要创建store。但是，store仍然可以通过在另一个store中导入和使用store来隐式嵌套
存储器在被定义的时候会自动被命名。因此，不需要对模块进行明确的命名。
Pinia允许你建立多个store，让你的捆绑器代码自动分割它们
Pinia允许在其他getter中使用getter
Pinia允许使用 $patch 在devtools的时间轴上对修改进行分组。

 
 
   
  
  this.$patch((state) => {   
  
    state.posts.push(post)   
  
    state.user.postsCount++   
  
  }).catch(error){   
  
    this.errors.push(error)   
  
  }

将 Pinia 2(目前处于 alpha 阶段)与 Vuex 进行比较，我们可以推断出 Pinia 领先于 Vuex 4。

Vue.js核心团队为Vuex 5制定了一个开放的RFC，类似于Pinia使用的RFC。目前，Vuex通过RFC来尽可能多地收集社区的反馈。希望Vuex 5的稳定版本能够超越Pinea 2。

据同时也是 Vue.js 核心团队成员并积极参与 Vuex 设计的 Pinia 的创建者(Eduardo San Martin Morote)所说，Pania 和 Vuex 的相似之处多于不同之处：

Pinia试图尽可能地接近Vuex的理念。它的设计是为了测试Vuex的下一次迭代的建议，它是成功的，因为我们目前有一个开放的RFC，用于Vuex 5，其API与Pinea使用的非常相似。我对这个项目的个人意图是重新设计使用全局Store的体验，同时保持Vue的平易近人的理念。我保持Pinea的API与Vuex一样接近，因为它不断向前发展，使人们很容易迁移到Vuex，甚至在未来融合两个项目(在Vuex下)。

尽管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目标，因此 Vuex 仍然是 Vue.js 应用程序的推荐状态管理库。

Vuex 和 Pinia 的优缺点

Vuex的优点

支持调试功能，如时间旅行和编辑
适用于大型、高复杂度的Vue.js项目

Vuex的缺点

从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
Vuex 4有一些与类型安全相关的问题

Pinia的优点

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
极其轻巧(体积约 1KB)
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia的缺点

不支持时间旅行和编辑等调试功能

何时使用Pinia，何时使用Vuex

根据我的个人经验，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。

将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

原文：https://blog.logrocket.com/pinia-vs-vuex/

作者：Emmanuel John

文章题目：Pinia与Vuex的对比：Pinia是Vuex的良好替代品吗？
转载来于：http://www.shufengxianlan.com/qtweb/news9/296009.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容