新项目、vue 3、typescript 优先选 pinia；vue 2 或深度集成 vuex 的老项目暂不迁移。pinia 更轻量、类型友好、适配 composition api；vuex 适用于需 strict 模式或复杂 modules 的 vue 2 场景。
Vue 项目里该用 Pinia 还是 Vuex，关键看项目类型和 Vue 版本。新项目、Vue 3、用 TypeScript —— 直接上 Pinia；老项目还在 Vue 2 或已深度集成 Vuex —— 暂不着急迁移。
什么时候该选 Pinia？
Pinia 是 Vue 官方推荐的现代状态管理方案，特别适合以下场景：
- 全新 Vue 3 项目：天然适配 Composition API，setup 语法糖写起来顺手，不用绕弯子
- 中小型应用：不需要写 mutations、不用配 namespaced 模块，一个 store 文件就是一个独立模块（比如 useUserStore、useCartStore）
- TypeScript 项目：state、getters、actions 全部自动推导类型，IDE 补全精准，几乎不用写 .d.ts
- 需要热更新或时间旅行调试：修改 store 不用刷新页面，DevTools 里能回溯每一步状态变化
什么情况下还得用 Vuex？
Vuex 并没“淘汰”，只是进入维护模式（只修 bug，不加新功能）。它仍有明确适用边界：
- 还在 Vue 2 的存量项目：Vuex 3 稳定成熟，迁移到 Pinia 需额外桥接插件，收益小、风险高
- 团队强依赖严格同步约束：比如金融类后台要求所有 state 修改必须经由 mutations，杜绝直接赋值，这种规范靠 Vuex 的 strict 模式能兜底
- 已有复杂 modules 嵌套结构：如果当前 store 分了十几层 modules + namespace，重构成多个 Pinia store 成本高于收益
代码风格对比：一眼看懂区别
同样是登录后存用户信息，两者的写法差异很直观：
Vuex（4.x）要写三块：
- state 里定义
user: null - mutations 里写
SET_USER(state, user) { state.user = user }（必须同步） - actions 里调接口再 commit：
commit('SET_USER', res.data)
Pinia 只需一处：
- 在 actions 中直接赋值：
this.user = await api.login(credentials) - 甚至可以在 setup 里用 ref/computed 写组合式风格，逻辑更贴近业务
新手起步建议
刚接触状态管理，别一上来就啃文档，按这个顺序试：
- 先用
reactive({})在两个组件间手动共享简单状态（比如主题色），体会“提升到全局”的必要性 - 再装 Pinia，照着官网 5 行代码建第一个 store，往组件里
useStore()调用，观察响应式更新 - 遇到跨路由共享数据（如登录态）、兄弟组件通信（如筛选器+列表联动）时，自然会发现 Pinia 的优势
- 等熟悉后，再回头看 Vuex 的 mutations 流程，就能理解它为何被简化 —— 不是功能退化，而是设计进化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
