Vuex状态管理零基础到项目实战

很多人写 Vue 项目写到一半会卡在同一个地方：组件之间开始互相传值，父子用 props 和 emit 还能忍，一旦出现兄弟组件共享数据、跨三四层传递、离开页面再回来数据就没了，代码就开始失控。Vuex 就是为这类场景准备的，但它不是「学会 mapState 就完事」的东西。

这门课面向的是已经能写 Vue 单文件组件、但对状态管理还没有系统认识的人。如果你还没用过 Vue CLI 或 Vite 起过一个项目，没写过组件、没接触过响应式数据，那先补这一块，再回来学会更顺。

先搞清楚「什么时候该用 Vuex」

不少人学 Vuex 的第一个问题是：我明明可以用 props 传，为什么还要引入一个库？这个判断力比记住 API 更重要。你需要能说清楚：哪些数据属于组件本地状态，哪些属于应用级共享状态；一个购物车、一个登录用户信息、一个全局的 loading，它们的存法有什么不同。

课程会从单组件的数据流讲到多组件共享时的痛点，把「为什么需要集中式存储」这件事讲透，而不是上来就甩一张 Vuex 架构图。看完这一段，你应该能自己判断一个需求该不该塞进 store。

核心概念要能画出来，不只是背下来

state、getters、mutations、actions、modules，这五个词几乎每篇 Vuex 文章都会列，但真正区分得清的人不多。常见的混淆点有几处：

• mutations 和 actions 到底差在哪，为什么异步必须放 actions；
• getters 和组件里的 computed 有什么区别，什么逻辑该放哪边；
• 严格模式下直接改 state 会怎样，为什么开发环境要开它；
• modules 拆分之后，命名空间怎么影响调用方式。

这些不是记忆题，是调试时真会踩的坑。课程配套的练习会让你亲手触发一次「在 mutation 外改 state」的报错，看到控制台提示，比读十遍文档管用。学完这部分，你应该能对着一个 store 文件，准确说出每行代码属于哪一层、为什么放这层。

实战部分练的是「拆」的能力

零基础课程最容易犯的毛病是把实战做成抄代码。这门课的项目部分更值得关注的是拆分过程：一个业务模块的状态该怎么组织，请求失败后状态怎么回滚，多个模块之间的数据依赖怎么处理，本地持久化（比如刷新后登录态不丢）放在哪一层做。

练习建议你跟着做的时候，先别急着抄最终代码，而是自己先写一版 store，再对照改。差异最大的地方，往往就是你理解最薄弱的地方。比如你有没有把接口请求写进 mutation，有没有在组件里直接 commit 一个带异步操作的 mutation，这些都能暴露问题。

看完应该能回答的问题

• 一个中等规模的 Vue 项目，store 应该按什么维度拆模块？
• 组件里拿到 store 数据，有哪几种写法，各自适合什么场景？
• 页面刷新后 Vuex 数据丢失，有哪几种解决思路，各自代价是什么？
• 如果项目用了 Vue Router，哪些状态其实应该放在路由参数或 URL 里，而不是 store 里？
• Vuex 和 Pinia 的区别在哪，新项目该怎么选？

最后一问尤其值得留意。现在新起的 Vue 3 项目里 Pinia 用得越来越多，但 Vuex 仍然是大量存量项目的现实。理解 Vuex 的数据流模型，再去看 Pinia，你会发现很多概念是相通的，迁移成本比想象中低。带着这些问题去学，比单纯「看完一遍视频」有用得多。