WHAT - Vue 状态管理库系列（一）- pinia vs vuex

今天主要介绍两个流行的 Vue 状态管理库。

本系列不涉及 Vue 状态管理中的 view、state、actions 相关概念和原理介绍，感兴趣的朋友可以阅读官方文档 What is a “State Management Pattern”，我们主要专注于介绍并学习 pinia 相比 vuex 的优点和底层实现。

一、介绍

Pinia 和 Vuex 是用于管理 Vue.js 应用程序状态的两种不同的状态管理库。

以下是对 Pinia 和 Vuex 的详细比较和分析。

1.1 Vuex

概述

Vuex 是 Vue.js 官方早期推荐的的状态管理库，广泛用于 Vue 2 和 Vue 3 项目中。它提供了一个集中式存储库，管理应用中所有的组件状态。

主要特性

• 集中式状态管理: 所有状态集中管理，便于调试和开发。
• 严格模式: 只能通过显式提交（commit）修改状态，确保状态变化可追踪。
• 插件系统: 丰富的插件支持，提供持久化、日志、时间旅行等功能。
• Vue Devtools 支持: 与 Vue Devtools 集成，方便调试状态变化。

缺点

• 复杂度: 对于小型应用，可能显得过于复杂和笨重。对于大型应用需要 Store 模块化管理时，需要额外配置 Modules。
• 模板代码: 需要写大量的模板代码（如 mutations、actions 等），不够简洁。

1.2 Pinia

在 vuex 官方给出了如下结论：

1. pinia is now the new default.
2. You could simply consider Pinia as Vuex 5 with a different name. 你可以简单地将Pinia视为具有不同名称的Vuex 5。

概述

Pinia 是一个新的状态管理库，是 Vue 3 的官方推荐替代方案。Pinia 提供了更现代的 API 设计和更轻量的实现。

主要特性

• 简洁的 API: 提供简洁、直观的 API，减少模板代码。
• 轻量且高性能: 比 Vuex 更加轻量，性能更好。
• 模块化设计: 使用 ES 模块化方式，支持按需加载和树摇优化。
• 组合式 API: 与 Vue 3 的 Composition API 紧密集成，更加灵活和强大。
• TypeScript 支持: 原生支持 TypeScript，更好的类型推断和代码提示。

二、比较

2.1 语法和使用

阅读官方文档即可。

可以从 menu 看出端倪：

vuex 包含 state、mutations、actions、modules

pinia 包含 state、actions

可以猜到：

1. pinia 可以直接修改 state，不过需要注意解构导致的响应性丢失问题，所以需要依赖于 storeToRefs 这类 api 封装一下 store 再解构
2. pinia 支持模块化 store 定义

2.2 复杂度

• Vuex 需要定义 mutations 和 actions，并且需要使用 Vuex 的辅助函数（如 mapState 和 mapActions）来绑定状态和方法，代码可能显得繁琐。
• Pinia 的 API 更加直观和简洁，使用 Composition API 的方式可以减少样板代码。

2.3 性能和体积

• Pinia 更轻量，性能优化更好，支持按需加载和树摇优化。
• Vuex 由于其复杂的功能和插件系统，可能在性能和体积上不如 Pinia。

2.4 TypeScript 支持

• Pinia 原生支持 TypeScript，更好的类型推断和代码提示。
• Vuex 也支持 TypeScript，但需要更多的配置和模板代码。

三、选择建议

1. 如果你在开发一个新的 Vue 3 项目，并且希望使用最新的 Composition API 和 TypeScript，Pinia 是一个很好的选择。

2. 如果你已经在使用 Vuex，并且项目比较复杂且稳定，继续使用 Vuex 也是可以的，特别是如果你已经投入了很多时间在 Vuex 上。

3. 如果你正在从 Vue 2 迁移到 Vue 3，可以考虑逐步引入 Pinia 作为替代方案。

总体而言，Pinia 提供了更现代、更简洁的状态管理方式，特别适合 Vue 3 的新特性和开发风格，而 Vuex 依然是一个强大且成熟的解决方案，适合复杂的大型应用。