Vue 教程：Pinia 核心概念详解——State、Getters、Actions 与模块化设计

快速概述

Pinia 是 Vue 官方推荐的状态管理库，旨在解决 Vue 应用中多组件间共享状态与复杂数据流的管理问题，尤其适用于中大型单页应用。它提供直观的 API 和基于组合式 API 的设计，与 Vue 3 深度集成。使用前需确保项目基于 Vue 3 并已安装 Pinia（npm install pinia）。

核心概念与原理

Pinia 的核心是定义一个 store 作为全局状态容器，包含 State（数据源）、Getters（派生状态）和 Actions（修改状态的方法）。State 驱动视图，Getters 类似计算属性用于派生数据，Actions 响应视图事件并触发状态变更，形成单向数据流，确保状态可预测和可维护。

实战步骤与代码

1. 创建 Pinia 实例并注册

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia() const app = createApp(App) app.use(pinia) // 注册 Pinia app.mount('#app')

2. 定义 Store（模块化设计）

// stores/counter.js
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() { this.count++ }
  }
})

3. 在组件中使用

// Counter.vue
import { useCounterStore } from './stores/counter'
export default {
  setup() {
    const store = useCounterStore()
    return { store }
  }
}

模板中直接访问 store.count、store.doubleCount，并调用 store.increment() 更新状态。

常见坑点与优化

• 解构丢失响应性：直接解构 state 会失去响应式，应使用 storeToRefs 保留响应性。
• 避免在 Getters 中修改 State：Getters 应保持纯函数，仅做派生计算。
• 模块化拆分：按业务功能拆分多个 store 文件，避免单一 store 过大，提升可维护性。
• 性能优化：合理使用 Getters 缓存派生数据，减少重复计算。

遵循上述实践，可充分发挥 Pinia 的简洁与高效，构建清晰可扩展的状态管理架构。