状态管理 Pinia vs Vuex 对比指南

在 Vue.js 项目状态管理工具技术选型时，经常会遇到选择 Vuex 还是 Pinia 的问题。Pinia 被 Vue.js 官方网站列为 Vue.js 的推荐状态管理工具，这可能是它被受欢迎的原因之一。在本文中，将对 Pinia 和 Vuex 进行详细的对比，阐述它们的独特功能、预期用途以及优缺点。

1.Pinia

pinia.vuejs.org/

Pinia 是一个相对较新的状态管理库，允许您在 Vue.js 组件间管理响应式状态。它也是目前推荐的全局状态管理工具。Vue 核心团队成员Eduardo San Martin Morote 设计了 Pinia。通过使用新的响应性机制，Pinia 构建了一个易于使用且具有适当类型的状态管理系统，是管理应用程序响应式状态的一个优秀库。与 Vuex 相比，Pinia 的API 学习曲线更平缓，让您的代码更易读。

1.1.快速使用

使用 Pinia 创建一个 store 特别简单：

js 复制代码

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

1.2.选择 Pinia 的理由

Devtools 支持：

Pinia 为 Vue devtools 提供了出色的支持，允许开发人员轻松调试和监控其应用程序的状态及变更。

热模块替换：

通过热模块替换，开发人员可以对代码进行更改，而更改会立即反映在运行的应用程序中，从而改进开发工作流程并缩短开发时间。如果没有 Pinia，全局状态可能会在 HMR 期间被破坏和重置，但 Pinia 会保留它。

插件：

Pinia store 可通过底层 API 进行全面扩展。利用插件，您可以执行本地 localStorage 同步、ORM（对象关系映射）、定义存储时添加选项等任务，当 Pinia 的默认行为无法满足您的需求时，您还可以利用更多插件。您可以开始使用或根据自己的需要创建插件。

完善的 TS 支持或针对 JS 用户的自动补全：

Pinia 为 TypeScript 提供了强大的支持，包括针对JavaScript的强大自动补全功能，大大简化了开发过程。利用这一功能，开发人员可以快速编写代码并避免常见错误，从而提高代码质量并缩短开发时间。

服务器端渲染支持：

Pinia 支持服务器端渲染（SSR），使开发人员能够在 SSR Vue.js框架（如 Nuxt）中使用 Pinia。

2.Vuex

vuex.vuejs.org/

Vuex 是一种用于 Vue.js 应用程序的状态管理模式和库，它作为应用程序中所有组件的集中存储库，并通过规则保证状态只能以可预测的方式进行更改。

2.1.快速使用

以下是一个在 Vuex 中的 store 的示例。

js 复制代码

import { createStore } from 'vuex'

const counterstore = createStore({
  state() {
    return {
      todoListItems: []
    }
  },
  getters: {
    countList(state) {
      return state.todoListItems.length()
    }
  },
  actions: {
    addNewToList({commit}, item) {
      commit('createNewItem', item)
    }
  },
  mutations: {
    createNewItem(state, item) {
      state.todoListItems.push(item)
    }
  }
})

2.2.选择 Vuex 的理由

模块化：

通过利用 Vuex 模块，您可以根据领域功能将存储分成几个文件，从而允许您在特定命名空间中访问模块中的状态周期。随着应用程序的增长，这成为一种有用的策略，以避免使用变得更加困难。

HMR支持：

Vuex 还支持热重载功能，利用 webpack 的热模块替换 API，可以在继续开发代码时快速重新加载突变、模块、操作和获取器。

Devtools 支持：

您还可以使用 Vue devtools 中的 Vuex 选项卡方便地访问和调试我们的突变，以及查看状态，为我们提供了一种轻松跟踪应用程序状态的方法。

3.Pinia 的优势

Pinia 在许多方面优于其他解决方案，包括Vuex。

直观的设计：

通过其简单直接的API，Pinia使创建和组织存储变得简单易懂，类似于创建组件。这种方法减少了需要模板代码的需求，并减少了与 Vuex 解决方案相比需要学习的概念数量。您无需记住："是 commit 还是 dispatch"，也无需使用魔法字符串来调用操作。例如：dispatch('doTheThing')。这还为其他开发人员提供了一种更容易更好地理解您的 store 的方式。

Mutations 不再存在：

无需考虑创建规则来更新状态。直接更新即可。如释重负

更好的TypeScript支持：

无需创建自定义的复杂封装程序来支持 TypeScript，所有内容都是类型化的，API 的设计方式也尽可能利用了 TS 类型推断。

自动完成：

JavaScript 自动完成功能让你更好地编写代码。不再需要注入魔法字符串，只需导入函数并调用即可。

更好的模块结构：

模块结构不再嵌套。您仍然可以通过导入和使用一个存储空间来隐式嵌套另一个存储空间，但 Pinia 通过设计提供了一种扁平结构，同时仍然支持存储空间之间的交叉组合方式。

天生轻量：

Pinia 只有 1KB，非常容易集成到您的项目中。这可能会提高应用程序的性能。

4.如何选择？

纵观这两个状态管理库，我们可以发现它们各有优势，但 Pinia 与 Vuex 相比优势明显。Pinia 已被指定为推荐的状态管理库，因此是构建 Vue.js 应用程序的不二之选。

如果您已经有在 Vuex 上运行的项目，不用担心，它不会很快消失。不过，如果您正在考虑将您的 Vuex 迁移到 Pinia，阅读本文肯定会有收获。