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

61次阅读

共计 3974 个字符,预计需要花费 10 分钟才能阅读完成。

介绍

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 我的项目。

正文完
 0