4.组件状态管理 VueX

VueX 解决什么问题

当多个组件需要共享状态，而且这个状态会被多处读取和修改时，状态分散在组件内部就会难以维护。VueX 提供了一个集中式状态容器，把“状态、修改方式、异步逻辑”统一管理。

核心概念

• state：全局共享状态。
• getters：对状态的派生计算。
• mutations：同步修改状态的唯一入口。
• actions：处理异步流程，再提交 mutation。
• modules：把大 store 按领域拆分。

数据流

组件触发 dispatch 或 commit，Store 统一处理后更新状态，依赖这个状态的组件再自动响应更新。

适用场景

• 用户信息、权限、全局配置
• 多页面共享缓存
• 复杂表单和跨组件联动

不适用场景

• 只在单组件内部使用的局部状态
• 很小的页面逻辑，强上 VueX 只会增加样板代码

结论

VueX 的价值不是“所有状态都放进去”，而是“让真正共享且复杂的状态可追踪、可维护”。