前端面试题：请简要说明 Vue2 中 Vuex 与 Vue3 中 Pinia 的区别，以及你更推荐哪一个？为什么？

请简要说明 Vue2 中 Vuex 与 Vue3 中 Pinia 的区别，以及你更推荐哪一个？为什么？

新项目官方都推荐用 Pinia 了：基本现在新项目都用 Pinia，老项目还用 Vuex。

1. 语法和使用方式：
   Pinia 语法更简洁，没有 mutation 层，直接在 action 里更改 state，学习和维护成本更低。
   Vuex 需要区分 state/mutation/action，写法相对繁琐。

2. TypeScript 支持：
   Pinia 原生支持 TypeScript，类型推断更强大。
   Vuex 的 TS 支持稍弱，类型写法偏繁琐。

3. 组合式 API 兼容性：
   Pinia 完美支持 Vue3 的 Composition API，可以在 setup 里直接用，响应式天然。
   Vuex 虽可用，但更偏向 Vue2 时代的 options API。

4. Store 模块化与组织方式：
   Pinia 支持多 store，天然避免命名冲突，逻辑更清晰。
   Vuex 通过 modules 管理，命名空间和引用相对复杂。

5. 开发体验与推荐：
   Pinia 是 Vue3 官方推荐的新一代状态管理库，体积更小，API 设计更现代。
   Vuex 兼容老项目，适合 Vue2，但新项目基本都建议用 Pinia。

简要代码对比

// Pinia 示例
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({ name: 'YUGUI' }),
  actions: { setName(name) { this.name = name } }
})

// Vuex 示例
const store = new Vuex.Store({
  state: { name: 'YUGUI' },
  mutations: { setName(state, name) { state.name = name } },
  actions: { setName({ commit }, name) { commit('setName', name) } }
})

总结

其实 Pinia 可以理解为官方在 Vue3 时代推出的“新一代状态管理”，它解决了 Vuex 里很多啰嗦的写法。 主要几个点：

• 写法简洁：Pinia 直接在 action 里改 state，不用 mutation 了，少写不少模板代码。
• TS 支持更好：Pinia 用 TypeScript 很舒服，类型推断到位，开发体验好，Vuex 用 TS 写多了就挺烦的。
• 和 Vue3 搭配更自然：Pinia 完全支持 Composition API，setup 里直接用 store，很方便。Vuex 虽然也能用，但感觉有点“兼容模式”那味。
• 模块化更灵活：Pinia 可以开很多 store，互不干扰，管理起来清爽。Vuex 的 module 用多了名字容易乱，还得加namespace。