#Vuex vs Pinia

#1. 面试题

Q: 为什么 Vue 3 推荐使用 Pinia 而不是 Vuex？它们有什么区别？

#2. Vuex 的痛点

Vuex 是 Options API 时代的产物。

• 冗余：修改状态必须经过 Mutation (同步) 或 Action (异步)。写文件要在 types / mutations / actions 之间反复横跳。
• TS 支持差：为了获得类型提示，需要编写极其复杂的泛型包装器。
• 模块化痛点：Namespaced modules 使用起来字符串路径容易写错，且难以 Tree-shaking。

#3. Pinia 的优势 (Vuex 5)

Pinia 是为 Composition API 设计的。

1. 极简 API：只有 State, Getters, Actions。去掉了 Mutations。Action 支持同步和异步。
2. TypeScript First：完全 TS 重写，类型推导非常丝滑，无需额外配置。
3. 独立的 Store：
   • 不再是一棵大树。每个 Store 是独立的模块 (defineStore)。
   • Tree-shaking：用到哪个加载哪个，打包体积更小。
4. 小于 1KB：极其轻量。

#4. 迁移建议

• 新项目：直接 Pinia。
• 老项目：Vuex 4 依然支持，无需强制迁移。但推荐新模块用 Pinia 写 (两者可以共存)。

#5. SSR 支持

Pinia 原生支持 SSR，且解决了 Vuex 在 SSR 中复杂的状态序列化问题。