前言在前一篇文章中我们明确了Event Bus 已死Props / Emit / Provide-Inject 各有边界。但还有一个问题没有解决❓ 真正的全局状态应该放在哪里Vue2 时代答案是Vuex。Vue3 时代官方给出的答案是✅Pinia这一篇我们就来讲清楚Pinia 到底是什么它如何取代 VuexState / Getter / Action 怎么用为什么它更适合 Composition API一、Vuex 的历史地位与痛点1️⃣ Vuex 解决了什么问题✅ 集中式状态管理✅ 可预测的数据流✅ DevTools 支持2️⃣ 但 Vuex 也有明显痛点痛点说明概念太多State / Getter / Mutation / Action修改状态繁琐必须 commit mutationTypeScript 支持差类型推导极其痛苦代码冗长一个简单的状态改动要写很多样板代码一句话总结Vuex 是为 Vue2 设计的不是为 Composition API 设计的。二、Pinia 是什么官方定义Pinia 是 Vue 的官方状态管理库是 Vuex 的继任者。它的设计目标非常明确✅ 更简单✅ 更直观✅ 更好的 TypeScript 支持✅ 更贴合 Composition API三、Pinia 核心概念State / Getter / Action1️⃣ 定义一个 Store// stores/user.ts import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ name: Tom, age: 18 }), getters: { doubleAge: (state) state.age * 2 }, actions: { growUp() { this.age } } })对比 Vuex❌ 没有 mutation✅ 只有 state / getter / action四、在组件中使用 Pinia1️⃣ 安装 Pinia// main.ts import { createApp } from vue import { createPinia } from pinia import App from ./App.vue createApp(App) .use(createPinia()) .mount(#app)2️⃣ 使用 Storescript setup langts import { useUserStore } from /stores/user const userStore useUserStore() /script template div p{{ userStore.name }}/p p{{ userStore.doubleAge }}/p button clickuserStore.growUp长大/button /div /template✅像使用普通对象一样使用状态五、为什么 Pinia 能取代 Vuex1️⃣ 去掉了 MutationVuexcommit(increment)Piniastore.increment()结论Mutation 是冗余设计。2️⃣ 天然支持 TypeScriptconst store useUserStore() store.age // ✅ 类型提示Vuex 需要(this as any).$store.state.user.age3️⃣ 与 Composition API 完美融合export function useUser() { const store useUserStore() return { ...store } }✅Pinia 本身就是 Composable 风格六、Pinia 的响应式与解构❌ 错误用法const { name } userStore 会失去响应式✅ 正确用法import { storeToRefs } from pinia const { name } storeToRefs(userStore)七、Pinia 的高级能力1️⃣ 模块化天生支持stores/ ├── user.ts ├── cart.ts └── product.ts✅无需 namespace2️⃣ 组合式写法推荐 ✅export const useUserStore defineStore(user, () { const name ref(Tom) const age ref(18) const doubleAge computed(() age.value * 2) const growUp () age.value return { name, age, doubleAge, growUp } })这是 Pinia 的终极形态。八、Pinia vs Vuex 对比总结对比项VuexPiniaMutation✅❌TypeScript❌✅Composition API❌✅代码量多少学习成本高低九、面试高频问答Q1Pinia 为什么去掉 Mutation因为 Mutation 增加了不必要的复杂度。Q2Pinia 和 Vuex 能共存吗可以但不推荐。Q3Pinia 是全局状态还是局部状态全局状态但可按模块拆分。十、总结Vuex 已完成历史使命Pinia 是 Vue3 状态管理的唯一官方答案更简洁、更类型安全、更 Composable新项目100% 使用 Pinia 下期预告第 13 篇插槽Slots完全指南 —— 从匿名插槽到作用域插槽