全局状态库方案对比 - 人人都会AI编程

当应用规模增长，跨组件共享状态的需求超过简单的状态提升和事件总线能承受的范围时，就需要引入专门的全局状态管理库。Vue 生态中主流方案是 Pinia 和 Vuex，两者都由 Vue 核心团队维护或推荐，但在设计理念和使用体验上有明显差异。下面用最直白的方式把它们的区别说清楚。

Vuex：成熟稳重，概念较多

Vuex 是 Vue 2 时代沿用至今的状态管理方案，核心思想来自 Flux 架构，将数据流严格单向化。

核心概念（需要全部理解才能上手）：

State：全局存储的数据。
Getters：基于 State 的计算属性。
Mutations：修改 State 的唯一入口，必须是同步操作。
Actions：处理异步操作（如调用接口），然后通过提交 Mutation 来修改 State。
Modules：当 Store 庞大时，拆分成多个模块管理。

典型代码片段（Vuex 4 syntax）：

const store = createStore({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

特点：概念清晰但繁琐。想要改一个数据，必须先定义 mutation，再通过 store.commit 调用，异步的话还要经过 action。对 TypeScript 类型推导支持较弱，需要额外写类型声明。模块嵌套时命名空间容易混乱。

Pinia：轻量直观，官方新宠

Pinia 是 Vue 3 官方推荐的新一代状态管理库，可以看作是 Vuex 的“简洁增强版”。它去掉了 Mutations，只保留 State、Getters、Actions，且 Action 既能处理同步也能处理异步。

核心概念（更扁平）：

State：直接在 Store 里用 ref 或 reactive 定义。
Getters：类似计算属性。
Actions：普通函数，内部用 this 访问 State，直接修改即可。

典型代码片段（Pinia）：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})

特点：

极简 API：没有 Mutation，行动就是修改。开发者不需要区分同步/异步，直接修改 state 即可（底层依然是响应式的安全修改）。
完美 TypeScript 支持：无需额外类型声明，Store 类型自动推导，在组件中引入后 IDE 提示完整。
模块化天然：每个 Store 是一个独立函数，通过组合多个 Store 管理不同领域状态，没有 module 嵌套和命名空间问题。
体积更小：压缩后约 1KB，几乎不影响 bundle 大小。
支持 DevTools：Vue DevTools 完美集成，可以追踪 state 变化、查看 actions 调用历史。

实际场景选型指南

| 场景 | 推荐方案 | 原因 |
|------|----------|------|
| 全新 Vue 3 项目 | Pinia | 官方首选，设计更现代，开发体验明显优于 Vuex。 |
| 维护 Vue 2 老项目 | Vuex → 可考虑迁移 Pinia | Vue 2 配合 Pinia 需要安装 @vue/composition-api 且功能稍有限制，若项目短期内不会升 Vue 3，维持 Vuex 即可；若计划升级，可提前迁移至 Pinia 减少后续成本。 |
| 简单全局共享 | 干脆不用库 | 如果只是共享一两个值（如当前用户信息），直接用 reactive 封装一个独立 JS 文件，通过 provide/inject 或直接导入使用即可，引入状态库反而增加概念负担。 |
| 团队背景 | Pinia 学习成本几乎为零 | Vuex 的多概念体系对新人有认知负担，Pinia 的 API 更贴近 Vue 3 组合式 API 的思维，上手更快。 |

根本区别一句话

Vuex 强迫你通过 Mutation 和 Action 的仪式感保证变更可追踪，Pinia 选择相信开发者会写出干净的代码，并用更灵活的 API 让状态管理回归直觉。 在 Vue 3 生态下，Pinia 已经全面替代 Vuex，除非接手遗留代码，否则无需再从 Vuex 开始。