标准答案

  1. Vuex 是 Vue 2 时代常见的官方状态管理方案,核心概念包括 state、getters、mutations、actions、modules。
  2. Pinia 是 Vue 3 官方推荐的状态管理库,API 更轻,直接用 state、getters、actions,不再强制区分 mutation 和 action。
  3. 类型体验上,Pinia 对 TypeScript 更友好,store 的 state、getter、action 推导更自然。
  4. 模块组织上,Vuex 常用 modules 做命名空间,Pinia 通常把每个 useXxxStore 当成独立 store。
  5. 迁移时不要只机械替换 API。要顺便梳理哪些状态真的需要全局共享,哪些可以回到组件本地或 composable。

题目解析

这题要避免只说“Pinia 更简单”。更完整的回答应该覆盖状态模型、类型、模块、迁移成本和适用场景。

Vuex mutation 的价值是让同步状态变更有统一入口;Pinia 取消 mutation 后,actions 既能同步也能异步。

老项目继续使用 Vuex 不一定要立刻迁移。迁移收益要和项目生命周期、团队熟悉度、组件库版本一起评估。

代码示例

Pinia 中一个 store 可以直接声明 state、getter 和 action。

TypeScript
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    profile: null as null | { name: string }
  }),
  getters: {
    isLoggedIn: (state) => Boolean(state.token)
  },
  actions: {
    async loadProfile() {
      this.profile = await fetchUserProfile()
    }
  }
})

常见误区

  • 把所有组件状态都放进全局 store,导致状态来源变复杂。
  • 认为 Pinia 没有 mutation 就不能追踪状态变化。Pinia Devtools 仍然能观察变更。
  • 迁移时只改语法,不清理无用的全局状态和过深模块层级。

作者信息