Menu

Pinia是Vuex的良好替代品吗？

前端 982° Views

介绍

Pinia 是西班牙语中菠萝发音，菠萝实际上是一组单独的花朵，它们结合在一起形成多个水果。与商店类似，每一家都是独立诞生的，但最终都是相互联系的。

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

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

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

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 方法。

import { defineStore } from 'pinia'

// main是Store的名称。它在您的应用程序中是唯一的。
// 并将出现在DevTools中
export const useMainStore = defineStore('main', {
  // a function that returns a fresh state
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    // getters receive the state as first parameter
    doubleCount: (state) => state.counter * 2,
    // use getters in other getters
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

Pinia使用

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

import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

export default defineComponent({ 
  setup() { 
    const main = useMainStore() 

    // extract specific store properties
    const { counter, doubleCount } = storeToRefs(main)
 
    return { 
      // whole store
      main,
      // state or getter
      counter,
      doubleCount,
      // 计算属性方式 
      _counter: computed(() => main.counter), 
    } 
  }, 
})

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

文档

要了解有关 Pinia 的更多信息，请查看其文档。

Vuex 和 Pinia 对比

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

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

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

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

Ps：2022-8：看官网的说明，意思是Pinia将会取代Vuex。

这些是目前Pinia相比Vuex的优势。

  • 极其轻巧(体积约 1KB)
  • store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见。
  • 支持多个Store。
  • 支持 Vue devtools、SSR 和 webpack 代码拆分。
  • 无需创建自定义的复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能地利用 TS 类型推断。与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易。
  • Pinia 不支持嵌套存储。相反，它允许你根据需要创建store。但是，store仍然可以通过在另一个store中导入和使用store来隐式嵌套
  • 存储器在被定义的时候会自动被命名。因此，不需要对模块进行明确的命名。
  • Pinia允许你建立多个store，让你的捆绑器代码自动分割它们
  • Pinia允许在其他getter中使用getter

本文固定连接：https://code.zuifengyun.com/2022/07/2486.html，转载须征得作者授权。

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

¥ 打赏支持
喜欢 1 评论 0