Vuex 的出现解决了什么问题?

Vuex 的出现，主要解决了 Vue 项目中组件之间“状态共享混乱”的问题。

Vuex 解决的问题：组件之间数据通信混乱

在 Vue 应用中：

1. 父子组件之间可以通过 props 和 $emit 通信；
2. 兄弟组件之间需要使用事件总线（event bus）或通过共同的父组件转发；
3. 多层嵌套组件传值变得 复杂、难维护、易出错。

典型痛点（Vuex 解决之前）：

问题	说明
❌ 多层传参繁琐	需要层层通过 props 传递数据
❌ 兄弟组件难通信	没有统一数据来源，只能借助中间层
❌ 数据状态不可控	数据分散在多个组件中，难以追踪状态变化
❌ 不易调试	组件更新来源不清晰，状态变化不透明
❌ 多人协作冲突	各组件各自管理状态，易造成逻辑混乱

Vuex 的作用与优势

Vuex 提供的能力	解决的问题
state 全局状态仓库	所有组件都能访问和共享统一状态
mutations 修改唯一入口	状态变化可预测、可追踪
actions 支持异步逻辑	把接口调用、复杂逻辑从组件中剥离
getters 派生状态处理	简化组件中复杂计算逻辑
modules 模块拆分	大型应用状态管理清晰、结构清楚
支持 devtools 时间旅行	状态调试友好，能回溯每次数据修改来源

示例场景：用户登录后，多个组件都需要用到用户信息

不使用 Vuex 时（每个组件都要自己传）

1. 登录成功后：手动将用户信息传给 App.vue → App.vue 再 props 给 Header.vue、Sidebar.vue、UserPage.vue…
2. 改变用户信息（如切换账号）后，多个组件都要手动更新。
3. 代码重复，通信麻烦，难以维护。

使用 Vuex 后（状态集中）

组件中统一获取用户信息

computed: {
  user() {
    return this.$store.state.userInfo;
  }
}