Pinia是Vuex的良好替代品吗?

更新日期: 2021-11-15阅读: 1.3k标签: Pinia

介绍

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'

exportconst 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:

exportdefault defineComponent({
  setup() {
    const todo = useTodoStore()

    return {
      // 只允许访问特定的state
      state: computed(() => todo.title),
    }
  },
})

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

Vuex使用

使用Vuex,可以按如下方式访问store:

import { computed } from'vue'
exportdefault {
  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 项目。

作者:Emmanuel John,链接:https://blog.logrocket.com/pinia-vs-vuex

链接: https://fly63.com/article/detial/10802

Pinia被鼓吹的setup写法真的好用吗

引用官方的一句话:Pinia是一个符合直觉的 Vue.js 状态管理库。简单说几点它的特性:它支持Vue3,同时也支持Vue2,是Vuex的完美过渡替代者

快速入门Pinia状态管理库

Pinia 是一个用于 Vue 的状态治理库,相似 Vuex, 是 Vue 的另一种状态治理计划。如果你现在使用 vue3 开发项目,那么推荐你使用 Pinia 开发。

全新的 Vue3 状态管理工具:Pinia

Vue3 发布已经有一段时间了,它采用了新的响应式系统,而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统,官方的状态管理库 Vuex 也在适配中

Vue新一代状态管理插件Pinia

如果你之前使用过 vuex 进行状态管理的话,那么 pinia 就是一个类似的插件。它是最新一代的轻量级状态管理插件。按照尤雨溪的说法,vuex 将不再接收新的功能,建议将 Pinia 用于新的项目。

测试一下Pinia,Vuex 要出局了?

自从我开始使用Vue 3和组合API以来,我也尝试使用 Pinea 作为状态管理库。如果是从是 vue2 和 vuex 过来的,就会觉得用起来差别还是很大的。

一文解析 Pinia 和 Vuex ,带你全面理解这两个 Vue 状态管理模式

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。

我使用 Pinia 的 5 大技巧

在这篇文章中,想与大家分享使用 Pinia 的五大技巧。以下是简要总结:不要创建无用的 getter,在 Option Stores 中使用组合式函数(composables),对于复杂的组合式函数,使用 Setup Stores

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!