关于前端:Pinia与Vuex的对比Pinia是Vuex的良好替代品吗

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

Pinia 的胜利能够归功于其治理存储数据的独特性能（可扩展性、存储模块组织、状态变动分组、多存储创立等）。

另一方面，Vuex 也是为 Vue 框架建设的一个风行的状态治理库，它也是 Vue 外围团队举荐的状态治理库。Vuex 高度关注应用程序的可扩展性、开发人员的工效和信念。它基于与 Redux 雷同的流量架构。

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

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 也很容易设置，须要装置和创立 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，能够按如下形式拜访该 store：

export default defineComponent({setup() {const todo = useTodoStore()

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

请留神，在拜访其属性时省略了 store 的 state 对象。

应用 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 架构库教训的开发人员来说，他们的学习曲线更容易。

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

在撰写本文时，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 将这些与 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 的长处

反对调试性能，如工夫旅行和编辑
实用于大型、高复杂度的 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 的毛病

不反对工夫旅行和编辑等调试性能

依据我的集体教训，因为 Pinea 是轻量级的，体积很小，它适宜于中小型利用。它也实用于低复杂度的 Vue.js 我的项目，因为一些调试性能，如工夫旅行和编辑依然不被反对。

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

关于前端:Pinia与Vuex的对比Pinia是Vuex的良好替代品吗

介绍

设置

Pinia 设置

Vuex 设置

应用

Pinia 应用

Vuex 应用

社区和生态系统的力量

学习曲线和文档

GitHub 评分

性能

比拟 Pinia 2 和 Vuex 4

Vuex 和 Pinia 的优缺点

何时应用 Pinia，何时应用 Vuex