介绍
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://segmentfault.com/a/1190000040368602