Vue 状态管理入门：从 Pinia 到 Vuex 的现代实践

Vue 状态管理解决的是组件间共享状态（如用户信息、购物车数据）的一致性与可维护性问题。Pinia 是 Vue 官方推荐的新一代状态管理库，更贴合 Vue 3 的 Composition API 风格，学习成本更低，且无需区分 Mutation 与 Action，统一使用 Actions 操作状态，并支持 TypeScript 静态类型系统。Vuex 则常用于 Vue 2 或旧项目，适合团队已有 Vuex 技术栈的场景。前置环境要求：Node.js 16+、Vue 3 项目（使用 Vite 或 Vue CLI 创建）。

核心概念与原理

Pinia 的核心是 Store，每个 Store 是一个模块化的状态容器，包含 State（数据）、Getters（计算属性）和 Actions（方法）。与 Vuex 不同，Pinia 去掉了 Mutation，所有状态变更都在 Actions 中完成，简化了异步逻辑处理。其响应式原理基于 Vue 3 的 reactive 与 ref，状态变更自动触发视图更新。工作流程：组件调用 Store 的 Actions → Actions 修改 State → 视图响应式更新。

实战步骤与代码

1. 安装 Pinia：在项目根目录执行 npm install pinia。
2. 注册 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') 

3. 创建 Store：新建 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++ // 直接修改状态 }, }, }) 

4. 在组件中使用：

import { useCounterStore } from '../stores/counter'

const store = useCounterStore() store.increment() // 调用 Action console.log(store.doubleCount) // 读取 Getter 

若需持久化，可结合插件（如 pinia-plugin-persistedstate）将 State 保存到 localStorage。

常见坑点与优化

• 未注册 Pinia 就使用 Store：报错 getActivePinia() was called but there was no active Pinia，确保在 main.js 中先 app.use(pinia)。
• 解构 State 失去响应性：使用 storeToRefs 解构，避免直接解构导致数据不更新。
• 滥用全局状态：仅将真正跨组件共享的数据放入 Store，避免性能浪费。
• 性能优化：利用 Getters 缓存计算结果，避免在模板中重复执行复杂逻辑。

对于 Vuex 项目，迁移到 Pinia 时需注意将 Mutation 合并到 Actions，并调整模块导入方式。