Vue Pinia状态管理（替代Vuex）-马育民老师

# 介绍

**Pinia（发音 /ˈpiːnjə/）** 是 Vue 官方团队开发并维护的**新一代状态管理库**，旨在替代 Vuex，成为 Vue3 生态的首选方案。

- **核心定位**：集中管理跨组件/页面共享的全局状态（如用户信息、购物车、主题设置）。
- **诞生背景**：2019 年 11 月实验立项，2021 年正式发布，适配 Vue3 组合式 API，同时兼容 Vue2。
- **核心设计理念**：**简洁、高效、类型安全**，解决 Vuex 模块化繁琐、TS 支持差、API 冗余等痛点。

# 优势（对比 Vuex）
### 1. 极简 API，移除冗余概念
- ❌ **Vuex**：必须按 `state → mutations → actions` 流程，mutation 仅同步、action 仅异步，模板代码多。
- ✅ **Pinia**：**废弃 mutations**，状态修改统一在 `actions` 中完成（支持**同步+异步**），可直接修改 state，代码更直观。

### 2. 完美 TypeScript 支持
- 原生适配 TS，**无需额外配置**即可获得完整类型推断与自动补全。
- 支持组合式函数（Composition API）写法，与 Vue3 响应式系统（ref/reactive）无缝融合。

### 3. 模块化设计，无嵌套复杂度
- ❌ **Vuex**：需手动嵌套 `modules`，命名空间繁琐，代码分割成本高。
- ✅ **Pinia**：每个 `Store` 是**独立扁平实体**，通过唯一 ID 区分，天然支持代码分割与按需加载。

### 4. 轻量高效，体积小性能优
- 压缩后仅 **1KB 左右**，几乎无额外性能损耗。
- 状态更新精准触发关联组件重渲染，效率高于 Vuex。

### 5. 开发体验友好
- 深度集成 **Vue DevTools**，支持时间旅行调试、状态快照、修改记录追踪。
- 支持**热更新**，修改 Store 无需重载页面，开发时保留当前 state。
- 支持**服务端渲染（SSR）**与**插件扩展**（如持久化存储）。

# 概念
### 1. Store（仓库）
- **定义**：用 `defineStore(id, options)` 创建的**独立状态单元**，包含 `state`、`getters`、`actions`。
- **ID**：每个 Store 的**唯一标识**（字符串），用于内部管理与调试。
- **两种写法**：
  - **选项式**：类似 Vue 选项式 API，结构清晰易上手。
  - **组合式**：类似 Vue3 组合式 API，直接使用 ref/reactive，更灵活。

### 2. State（状态）
- **作用**：存储**初始数据**，相当于组件的 `data`，必须是**函数**（避免多实例状态污染）。
- **特点**：响应式，可直接访问或修改（推荐用 `actions` 或 `$patch` 批量修改）。

### 3. Getters（计算属性）
- **作用**：对 state 进行**计算/过滤**，相当于组件的 `computed`，可依赖其他 getters。
- **特点**：缓存结果，依赖变化时自动更新，支持传参。

### 4. Actions（方法）
- **作用**：**修改状态**的方法，相当于组件的 `methods`，支持**同步+异步**（如接口请求）。
- **特点**：可访问 `this`（当前 Store 实例），支持跨 Store 调用，推荐用于封装业务逻辑。

# 快速上手
### 1. 安装
```bash
npm install pinia
# 或
yarn add pinia
# 或
pnpm add pinia
```

### 2. 初始化（main.ts）
```typescript
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia() // 创建 Pinia 实例

app.use(pinia) // 挂载到 Vue 应用
app.mount('#app')
```

### 3. 定义 Store（选项式，stores/counter.ts）
```typescript
import { defineStore } from 'pinia'

// 唯一 ID：counter
export const useCounterStore = defineStore('counter', {
  // 1. State：初始状态（函数返回对象）
  state: () => ({
    count: 0,
    name: '计数器'
  }),

// 2. Getters：计算属性
  getters: {
    // 简单计算：count 翻倍
    doubleCount: (state) => state.count * 2,
    // 依赖其他 getters：count 翻倍 + 1
    doubleCountPlusOne: (state, getters) => getters.doubleCount + 1
  },

// 3. Actions：修改状态的方法（同步+异步）
  actions: {
    // 同步：count 自增
    increment() {
      this.count++ // 直接访问 state
    },
    // 同步：批量修改 state（推荐）
    reset() {
      this.$patch({ count: 0, name: '计数器' })
    },
    // 异步：模拟接口请求后修改 state
    async asyncIncrement() {
      await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟请求
      this.count++
    }
  }
})
```

### 4. 定义 Store（组合式，stores/user.ts）
```typescript
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  // 1. State：用 ref 定义响应式数据
  const username = ref('')
  const token = ref('')
  const isLogin = ref(false)

// 2. Getters：用 computed 定义计算属性
  const welcomeMsg = computed(() => `欢迎，${username.value}`)

// 3. Actions：用函数定义方法
  function login(userData: { username: string; token: string }) {
    username.value = userData.username
    token.value = userData.token
    isLogin.value = true
  }

function logout() {
    username.value = ''
    token.value = ''
    isLogin.value = false
  }

// 返回暴露的属性和方法
  return { username, token, isLogin, welcomeMsg, login, logout }
})
```

### 5. 组件中使用（Vue3 组件）
```vue
<template>
  <div>
    <h3>计数器：{{ counter.count }}</h3>
    <p>翻倍：{{ counter.doubleCount }}</p>
    <button @click="counter.increment">自增</button>
    <button @click="counter.asyncIncrement">异步自增</button>
    <button @click="counter.reset">重置</button>

<h3>用户：{{ user.welcomeMsg }}</h3>
    <button @click="handleLogin">登录</button>
    <button @click="handleLogout">退出</button>
  </div>
</template>

// 获取 Store 实例（响应式）
const counter = useCounterStore()
const user = useUserStore()

// 调用 actions
const handleLogin = () => {
  user.login({ username: '张三', token: '123456' })
}
const handleLogout = () => {
  user.logout()
}
</script>
```

# 高级用法
### 1. 访问其他 Store
在一个 Store 的 actions 中调用另一个 Store 的方法：
```typescript
// stores/counter.ts
import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      const user = useUserStore() // 获取 userStore 实例
      if (user.isLogin) {
        this.count++
      } else {
        console.log('请先登录')
      }
    }
  }
})
```

### 2. 状态持久化（插件）
使用 `pinia-plugin-persistedstate` 插件将状态保存到 localStorage：
1. 安装：
```bash
npm install pinia-plugin-persistedstate
```
2. 注册插件（main.ts）：
```typescript
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 注册持久化插件
```
3. 启用持久化（Store 中）：
```typescript
export const useUserStore = defineStore('user', {
  state: () => ({ /* ... */ }),
  persist: true // 开启当前 Store 的持久化
})
```

### 3. 批量修改状态（$patch）
- **作用**：一次性修改多个 state 属性，减少响应式触发次数，提升性能。
- **用法**：
```typescript
// 方式1：对象形式（合并修改）
counter.$patch({ count: counter.count + 1, name: '新计数器' })

// 方式2：函数形式（直接修改 state）
counter.$patch(state => {
  state.count++
  state.name = '新计数器'
})
```

### 4. 重置状态（$reset）
将 state 重置为初始值（仅选项式 Store 支持）：
```typescript
counter.$reset() // count 恢复为 0，name 恢复为 "计数器"
```

### 5. 订阅状态变化（$subscribe）
监听 state 变化，执行回调（如日志记录、数据同步）：
```typescript
// 组件中订阅
counter.$subscribe((mutation, state) => {
  console.log('状态变化：', mutation, state)
})
```

# 最佳实践
1. **按功能拆分 Store**：每个 Store 对应一个业务模块（如 `user`、`cart`、`theme`），避免单一 Store 臃肿。
2. **优先使用 actions 修改状态**：集中封装业务逻辑，便于维护与复用。
3. **组合式 Store 灵活度高**：Vue3 + TS 项目优先使用组合式写法，与组件代码风格统一。
4. **合理使用持久化**：仅持久化必要状态（如用户登录态、主题设置），避免 localStorage 过大。
5. **避免过度使用全局状态**：简单组件状态优先用 `ref/reactive`，全局共享状态才用 Pinia。

# 总结
Pinia 作为 Vue 官方推荐的新一代状态管理库，以**极简 API、完美 TS 支持、模块化设计、友好开发体验**四大核心优势，彻底替代 Vuex，成为 Vue3 项目状态管理的首选方案。无论是小型项目还是大型应用，Pinia 都能提供简洁、高效、可维护的状态管理解决方案。

原文出处：http://www.malaoshi.top/show_1GW3H2YtPX7r.html