Vue 状态管理入门：Pinia 与 Vuex 的对比及实战选择

Vue 状态管理解决的是多组件共享数据时单向数据流被破坏的问题，确保状态变化可预测。本文面向通用读者，前置环境要求是已掌握 Vue 3 基础与 Composition API。Pinia 是 Vuex 的官方替代方案，两者均适用于中大型应用，但 Pinia 更简洁、对 TypeScript 支持更友好。

核心概念与原理

Vuex 采用集中式存储管理应用状态，通过 State、Getter、Mutation、Action 四个核心概念，强制以单向数据流方式变更状态。Pinia 则基于 Composition API 设计，移除了 Mutation，直接修改 State，同时利用 Vue 3 的响应式系统，使状态管理更直观、代码量更少。

实战步骤与代码

1. 安装与配置 Pinia

// 安装 Pinia
npm install 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
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { doubleCount: (state) => state.count * 2 }, actions: { increment() { this.count++ // 直接修改 state } } })

3. 组件中使用

<template>
  <p>{{ counter.count }} / {{ counter.doubleCount }}</p>
  <button @click="counter.increment()">+1</button>
</template>
<script setup> import { useCounterStore } from './stores/counter' const counter = useCounterStore() </script>

4. Vuex 对比示例

// Vuex 需要 Mutation 才能修改状态
mutations: {
  increment(state) {
    state.count++
  }
}
// 调用需通过 commit
store.commit('increment')

常见坑点与优化

• Pinia 解构丢失响应性：直接解构 state 会失去响应式，应使用 storeToRefs。
• Vuex 异步操作：务必在 Action 中处理异步，Mutation 必须同步。
• 模块化拆分：项目变大时，将 Store 按业务模块拆分，避免单一文件臃肿。
• 性能优化：避免在 Getter 中执行复杂计算，必要时使用缓存。

选择建议：新项目优先使用 Pinia，其 API 更简洁、TypeScript 支持更好；维护 Vuex 旧项目时，理解其 Mutation 与 Action 的职责划分至关重要。