为什么建议你用 Pinia 替换 Vuex？

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

1.基本介绍

1.1.Pinia

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

使用 Pinia 创建一个 store示例：

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.Vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 中创建一个 store 示例：

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.Pinia vs Vuex 优缺点对比

2.1.Pinia 优点

• 🎉 强大的自动补全：Pinia 为 TypeScript 提供了强大的支持，包括针对 JavaScript 的强大自动补全功能，大大简化了开发过程。开发人员可以快速编写代码并避免常见错误，从而提高代码质量并缩短开发时间。
• 🎉 DevTools支持：Pinia 为 Vue devtools 提供了出色的支持，允许开发人员轻松调试和监控其应用程序的状态及变更。
• 🎉 热模块替换：通过热模块替换，开发人员可以对代码进行更改，而更改会立即反映在运行的应用程序中，从而改进开发工作流程并缩短开发时间。如果没有 Pinia，全局状态可能会在 HMR 期间被破坏和重置，但 Pinia 会保留它。
• 🎉 支持 SSR：Pinia 支持服务器端渲染（SSR），使开发人员能够在 SSR Vue.js框架（如 Nuxt）中使用 Pinia。
• 🎉 可扩展性：Pinia store 可通过底层 API 进行全面扩展。利用插件，您可以执行本地 localStorage 同步、ORM（对象关系映射）、定义存储时添加选项等任务，当 Pinia 的默认行为无法满足您的需求时，您还可以利用更多插件。您可以开始使用或根据自己的需要创建插件。

2.2.Vuex 优点

• 👍🏻 模块化机制：通过利用 Vuex 模块化特性，我们可以根据业务需求将状态分为几个文件（一般考虑以页面为单位划分），您可以使用命名空间管理模块中的状态周期。随着应用程序的增长，可以引入模块按需加载策略，进一步提升页面加载性能。
• 👍🏻 HMR 支持：Vuex 支持热重载功能，利用 webpack 的热模块替换 API，可以在开发代码时快速重新加载state、mutations、action 和getter。
• 👍🏻 DevTools支持：可以使用 Vue devtools 中的 Vuex 选项卡方便地访问和调试mutation，以及查看状态，为我们提供了一种轻松跟踪应用程序状态的方法。

3.选择 Pinia 的理由

Pinia 和 Vuex 设计类似，都沿用 Flux 的思想，并针对 Vue 框架单独进行了一些设计上的优化。但 Pinia 在许多方面优于其他解决方案，包括 Vuex。主要优势如下：

1）直观的设计：

Pinia 的 API 设计简单直接，使创建和组织存储变得简单，类似于创建组件。这种方法减少了需要模板代码的需求，不用像 Vuex 一样去关注 commit 还是 dispatch。Pinia 为开发人员提供了一种更容易更好地理解您的 store 的方式。

2）更好的 TS 支持：

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

3）舍弃了 Mutations 和 module：

Pinia 并非完全抛弃了 mutation，而是将对 state 中单个数据进行修改的操作封装为一个 mutation，但不对外开放接口。可以在 devtools 中观察到 mutation。

Pinia 通过在创建 store 时指定 name 来区分不同的 store，不再需要 module。

4）更好的模块结构：

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

5）天生的轻量：

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

总结

Pinia 和 Vuex 两个状态管理库各有优势，但 Pinia 与 Vuex 相比优势更加明显。另外，Pinia 已被指定为官方推荐的状态管理库，因此是构建 Vue.js 应用程序的不二之选。

如果您已经有在 Vuex 上运行的项目，不建议进行迁移，毕竟迁移需要成本。如果您正在考虑新的项目技术选型，推荐你选择 Pinia！

关注FED实验室及其微信公众号，获取更多前端热点资讯。