标准答案
- Vuex 是 Vue 2 时代常见的官方状态管理方案,核心概念包括 state、getters、mutations、actions、modules。
- Pinia 是 Vue 3 官方推荐的状态管理库,API 更轻,直接用 state、getters、actions,不再强制区分 mutation 和 action。
- 类型体验上,Pinia 对 TypeScript 更友好,store 的 state、getter、action 推导更自然。
- 模块组织上,Vuex 常用 modules 做命名空间,Pinia 通常把每个 useXxxStore 当成独立 store。
- 迁移时不要只机械替换 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 仍然能观察变更。
- 迁移时只改语法,不清理无用的全局状态和过深模块层级。