Pinia 渐进式学习指南

目录

0. 什么是 Pinia？
1. 安装与初始化
2. 第一个 Store
3. State（状态）
4. Getters（计算属性）
5. Actions（方法）
6. 在组件中使用 Store
7. Store 之间的组合
8. 插件机制
9. 测试 Store
10. 最佳实践总结

一、什么是 Pinia？

Pinia 是 Vue 官方推荐的状态管理库，也是 Vuex 的继任者。它具有以下特点：

• 更简洁的 API，无需 mutations，直接修改状态
• 天然支持 TypeScript，类型推断开箱即用
• 支持 Composition API，与 Vue 3 无缝集成
• 模块化设计，每个 Store 都是独立的，没有嵌套模块
• 集成 Vue DevTools，支持调试

与 Vuex 对比：

二、安装与初始化

安装

npm install pinia
# 或
pnpm add pinia

在 Vue 应用中挂载

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
​
const app = createApp(App)
const pinia = createPinia()
​
app.use(pinia)
app.mount('#app')

推荐目录结构

src/
  stores/
    counter.ts     # 计数器 Store
    user.ts        # 用户 Store
    cart.ts        # 购物车 Store
  components/
  App.vue
  main.ts

三、第一个 Store

Store 的两种写法

Pinia 提供两种风格，推荐使用 Setup Store（Composition API 风格）。

Option Store（熟悉 Vue Options API 的人友好）

类比：state → data，getters → computed，actions → methods。

// stores/counter.ts
import { defineStore } from 'pinia'
​
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Pinia',
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Setup Store（推荐）

和写