Pinia 入门：新一代 Vue 状态管理库详解

在 Vue.js 生态系统中，状态管理一直是一个核心话题。Vuex 作为官方推荐的状态管理库，长期以来一直是许多开发者的首选。然而，随着 Vue 3 的发布和 Composition API 的普及，社区对更轻量、更灵活、更符合直觉的状态管理方案的需求日益增长。Pinia 正是在这样的背景下应运而生，并迅速成为 Vue 状态管理的新宠。

1. Pinia 究竟是什么？

Pinia（发音为 /piːnjʌ/，类似英语中的 "peenya"）是一个由 Vue.js 核心团队成员 Eduardo San Martin Morote（又名 posva）开发的 Vue 状态管理库。它充分利用了 Vue 3 的 Composition API 和 Reactivity System，提供了一种更简单、更直观、更类型安全的方式来管理应用程序的状态。

Pinia 的核心优势：

• 轻量级： Pinia 的体积非常小（压缩后约 1KB），对应用程序的性能影响微乎其微。
• 简单直观： Pinia 的 API 设计简洁明了，学习曲线平缓。即使是初学者也能快速上手。
• 类型安全： Pinia 对 TypeScript 有着出色的支持，提供了完整的类型推断和类型检查，有助于减少运行时错误。
• 模块化： Pinia 采用模块化设计，允许你将状态分割成多个独立的 store，便于组织和维护大型应用程序的状态。
• Devtools 支持： Pinia 与 Vue Devtools 深度集成，提供了强大的调试工具，可以轻松地查看和修改状态、跟踪 mutations 和 actions。
• 插件系统： Pinia 提供了灵活的插件系统，允许你扩展其功能，例如添加持久化存储、日志记录等。
• 服务器端渲染（SSR）支持： Pinia 对 SSR 有着良好的支持，可以轻松地在服务器端和客户端之间共享状态。

2. Pinia 与 Vuex 的对比

虽然 Pinia 和 Vuex 都是 Vue 的状态管理库，但它们在设计理念和实现方式上存在一些关键差异：

总结：

• Pinia 更轻量、更简单、更类型安全，更适合 Vue 3 和 Composition API。
• Vuex 更成熟、社区更庞大，但 API 相对复杂，对 TypeScript 的支持较弱。

如果你正在开发一个新的 Vue 3 项目，并且倾向于使用 Composition API，那么 Pinia 几乎是你的不二之选。如果你正在维护一个使用 Vuex 的旧项目，那么继续使用 Vuex 也是一个合理的选择，除非你有充分的理由进行迁移。

3. Pinia 核心概念

Pinia 的核心概念非常简单，主要围绕 Store 展开。

3.1. Store

Store 是 Pinia 中状态管理的中心。一个 Store 包含以下几个部分：

• state： 存储应用程序的状态数据。类似于 Vue 组件中的 data。
• getters： 用于从 state 中派生出新的状态。类似于 Vue 组件中的 computed 属性。
• actions： 用于修改 state 的方法。可以是同步的，也可以是异步的。类似于 Vuex 中的 actions（但 Pinia 中没有 mutations）。

定义 Store：

Pinia 提供了 defineStore 函数来定义 Store。

```javascript
// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++;
},
async incrementAsync() {
await new Promise((resolve) => setTimeout(resolve, 1000));
this.count++;
},
},
});
```

• defineStore 的第一个参数是 Store 的唯一 ID，在整个应用程序中必须是唯一的。
• 第二个参数是一个配置对象，包含 state、getters 和 actions。
• state 是一个返回初始状态对象的函数。
• getters 是一个包含 getter 函数的对象，每个 getter 函数接收 state 作为参数，并返回一个派生状态。
• actions 是一个包含 action 函数的对象，每个 action 函数可以访问和修改 state。

3.2. 使用 Store

在 Vue 组件中使用 Store 非常简单：

```vue

```

• 使用 useCounterStore 函数获取 Store 实例。
• 可以直接访问 Store 实例的 state 和 getters。
• 可以直接调用 Store 实例的 actions。
• 由于 Pinia 利用了 Vue 3 的响应式系统，当 state 发生变化时，组件会自动更新。

注意:
直接修改store.count是可以的，Pinia 不像 Vuex 那样强制要求通过 mutations 来修改状态。但是，为了更好的代码可维护性和调试，推荐在 actions 中修改状态。

3.3 选项式API中使用Pinia

如果你更喜欢选项式 API，也可以在 Pinia 中使用它：

```vue

```

Pinia 提供了 mapState 和 mapActions 辅助函数，类似于 Vuex 中的 mapState 和 mapActions，可以帮助你将 Store 中的状态和方法映射到组件的 computed 和 methods 中。

4. 进阶用法

4.1. Store 之间的交互

在大型应用程序中，不同的 Store 之间可能需要相互访问和交互。Pinia 允许你在一个 Store 中访问另一个 Store 的状态和方法。

```javascript
// stores/user.js
import { defineStore } from 'pinia';
import { useCounterStore } from './counter';

export const useUserStore = defineStore('user', {
state: () => ({
name: 'John Doe',
}),
actions: {
greet() {
const counterStore = useCounterStore();
console.log(Hello, ${this.name}! The count is ${counterStore.count}.);
},
},
});
```

在 user Store 的 greet action 中，我们通过 useCounterStore() 获取了 counter Store 的实例，并访问了它的 count 状态。

4.2. 插件

Pinia 提供了插件系统，允许你扩展其功能。

创建插件：

一个 Pinia 插件就是一个函数，它接收 Pinia 实例作为参数。

``javascript
// plugins/myPlugin.js
export function myPlugin({ store }) {
// 在每个 store 创建后调用
store.$subscribe((mutation, state) => {
// 监听 state 的变化
console.log(Store ${mutation.storeId} changed:`, mutation.type, state);
});

store.$onAction((context) => {
//监听action调用
console.log(context)
})
}
```

使用插件：

```javascript
// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { myPlugin } from './plugins/myPlugin';

const pinia = createPinia();
pinia.use(myPlugin);

const app = createApp(App);
app.use(pinia);
app.mount('#app');
``
通过pinia.use()`来使用插件。

常用插件：

• pinia-plugin-persistedstate： 提供状态持久化功能，将 Store 的状态保存到 localStorage 或 sessionStorage 中。
• pinia-logger： 提供日志记录功能，记录 Store 的 mutations 和 actions。

4.3. Devtools 支持

Pinia 与 Vue Devtools 深度集成，提供了强大的调试工具。

• Timeline： 可以查看 Store 的状态变化历史、mutations 和 actions 的调用情况。
• State： 可以查看和修改 Store 的当前状态。
• Time Travel： 可以在不同的状态之间跳转，方便调试。

4.4. 服务器端渲染（SSR）

Pinia 对 SSR 有着良好的支持。在 SSR 环境中，你需要确保每个请求都使用一个新的 Pinia 实例，以避免状态污染。

```javascript
// server.js
import { createSSRApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

export function createApp() {
const app = createSSRApp(App);
const pinia = createPinia();
app.use(pinia);
return { app, pinia };
}
```
在客户端激活时，需要将服务端的状态同步到客户端的 Pinia 实例中。

```javascript
// client.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const pinia = createPinia();

// 假设服务端将状态注入到 window.INITIAL_STATE 中
if (window.INITIAL_STATE) {
pinia.state.value = window.INITIAL_STATE;
}

const app = createApp(App);
app.use(pinia);
app.mount('#app');
```
Pinia官方文档提供了更详细的SSR指南，建议参考官方文档进行配置。

5. 总结

Pinia 作为新一代的 Vue 状态管理库，凭借其轻量级、简单直观、类型安全、模块化等优势，正在迅速成为 Vue 开发者的首选。它充分利用了 Vue 3 的特性，提供了更现代、更高效的状态管理方案。

如果你正在开始一个新的 Vue 3 项目，强烈建议你尝试使用 Pinia。如果你正在维护一个使用 Vuex 的项目，可以考虑在适当的时候迁移到 Pinia，以获得更好的开发体验和性能。

希望这篇文章能够帮助你全面了解 Pinia，并开始在你的项目中使用它。如果你有任何问题或建议，欢迎留言讨论。