Vue 3 状态管理新选择：Pinia 详细指南

Pinia 是 Vue 生态系统中的一个现代状态管理工具，它提供了比 Vuex 更简洁和直观的 API，同时兼具强大的功能。作为 Vue 3 的官方推荐状态管理库，Pinia 支持模块化、热重载、插件扩展，并对 TypeScript 提供了开箱即用的支持。在这篇文章中，我们将深入探讨 Pinia 的安装、基本用法、持久化、与 Vuex 的对比，以及一些进阶技巧，让你全面掌握这个新一代的状态管理工具。

一、Pinia 是什么？

Pinia 是 Vue 官方团队开发的状态管理库，它能够帮助我们在 Vue 项目中高效地管理应用状态。Pinia 的名字来源于西班牙语中“菠萝”之意，与 Vue 的生态系统相呼应。Pinia 的一些关键特性包括：

1. 模块化设计：每个 store 是独立的模块，易于管理和扩展。
2. Composition API 支持：基于 Vue Composition API 构建，能够轻松整合到 Vue 3 项目中。
3. 更好的 TypeScript 支持：Pinia 针对类型安全进行了优化，更适合 TypeScript 项目。
4. 插件支持：允许我们通过插件扩展功能，比如持久化、同步等。

二、安装与初始化

1. 安装 Pinia

在安装之前，确保项目已经使用了 Vue 3。使用以下命令来安装 Pinia：

npm install pinia

2. 配置 Pinia

在 Vue 项目的 main.js 中引入并配置 Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

三、定义一个 Store

在 Pinia 中，每个 store 就像一个小的模块，包含了状态（state）、计算属性（getters）和方法（actions）。让我们来看如何定义一个简单的用户 store。

示例：创建用户信息 Store

在 src/stores 目录下创建一个 user.js 文件，用于管理用户状态。

// src/stores/user.js
import { defineStore } from 'pinia'

// 使用 defineStore 创建一个名为 "user" 的 store
export const useUserStore = defineStore('user', {
 state: () => ({
   name: '张三',
   age: 25,
   isLoggedIn: false
}),
 getters: {
   // 计算属性：返回用户的基本信息
   userInfo(state) {
     return `${state.name}, ${state.age}岁`
  }
},
 actions: {
   // 登录操作，接受用户名作为参数
   login(name) {
     this.name = name
     this.isLoggedIn = true
  },
   // 登出操作
   logout() {
     this.name = ''
     this.isLoggedIn = false
  }
}
})

在这个 user store 中，我们定义了一个基本的用户状态、一个计算属性和两个操作方法。

1. State

state 是一个函数，用于返回 store 的初始状态。不同于 Vuex 中的对象方式，Pinia 推荐使用函数返回的形式，保证每个实例有独立的状态。

2. Getters

getters 是一种计算属性，用于从状态中派生数据。类似于 Vuex 的 getters，但在 Pinia 中直接定义在 store 内部，并且可以通过 this 访问 store 的其他状态和 getters。

3. Actions

actions 用于定义状态的操作逻辑。Pinia 的 actions 支持异步操作，这使得它在异步请求或复杂逻辑处理上更加灵活。

四、在组件中使用 Store

要在组件中使用 Pinia 的 store，首先需要在组件的 setup 函数中引入对应的 store，并可以直接使用 store 中的 state、getters 和 actions。

示例：使用 user Store

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 使用 state 和 actions
function handleLogin() {
 userStore.login('李四')
}
</script>

<template>
 <div>
   <p>用户信息：{{ userStore.userInfo }}</p>
   <button @click="handleLogin">登录</button>
   <button @click="userStore.logout">登出</button>
 </div>
</template>

在这个例子中，我们使用 useUserStore 获取了 user store 的实例，通过 userStore.userInfo 访问计算属性，通过 userStore.login 执行登录方法。

五、持久化 Store 数据

在实际项目中，我们通常需要将一些关键的状态持久化到本地存储中，避免页面刷新导致状态丢失。Pinia 本身不提供持久化功能，但我们可以通过插件 pinia-plugin-persistedstate 来实现持久化存储。

1. 安装持久化插件

npm install pinia-plugin-persistedstate

2. 配置持久化插件

在 main.js 中配置持久化插件：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

3. 配置 Store 的持久化选项

为需要持久化的 store 启用 persist 选项：

export const useUserStore = defineStore('user', {
 state: () => ({
   name: '张三',
   age: 25,
   isLoggedIn: false
}),
 persist: true
})

通过设置 persist: true，Pinia 会自动将 store 状态保存到 LocalStorage，并在应用启动时恢复状态。

六、Pinia 与 Vuex 的对比

Pinia 是对 Vuex 的升级和简化。以下是两者的一些主要区别：

七、Pinia 中的高级用法

1. 动态 Store

Pinia 支持在需要时动态创建 store。这在需要按需加载模块或状态的时候非常有用。

// src/stores/product.js
import { defineStore } from 'pinia'

export const useProductStore = defineStore({
 id: 'product',
 state: () => ({
   items: []
})
})

在组件中动态引入 store：

const productStore = useProductStore()

2. 使用插件扩展功能

除了持久化插件，Pinia 还支持其他自定义插件扩展。你可以通过 .use() 方法为 store 添加中间件，比如实现状态同步到服务器、日志记录等功能。

八、总结

Pinia 是一个现代的 Vue 状态管理库，去掉了 Vuex 中的冗余设计，提升了易用性和性能，同时提供了完善的 TypeScript 支持和插件扩展能力。在这个教程中，我们详细介绍了 Pinia 的安装与配置、基础用法、持久化配置、与 Vuex 的对比、以及一些进阶用法。希望这篇文章能帮助你更好地理解和使用 Pinia，从而更高效地管理 Vue 项目中的应用状态。

来源：编码时光机