Vuex 是 Vue.js 官方的状态管理库，专为解决中大型单页应用（SPA）中组件间状态共享问题而设计，核心是集中式存储和可预测的状态更新。
一、为什么需要 Vuex？（解决的问题）
Vue 组件间通信通常用 props/$emit、EventBus 等，但当应用复杂时（如多层级组件嵌套、跨组件共享状态），这些方式会导致：
状态传递繁琐：props 需逐层传递（“prop drilling”），EventBus 则难以追踪状态来源；
状态管理混乱：多个组件直接修改同一状态，易引发数据不一致、难以维护的问题。
Vuex 通过单一数据源（全局 Store）统一管理状态，让状态变更可追踪、可预测。
二、核心概念（5 大核心）
Vuex 的 Store 本质是一个响应式对象，包含以下核心部分：
1. State（状态）
作用：存储应用的共享状态（如用户信息、全局配置），是唯一数据源。
特点：响应式，组件通过
this.$store.state或mapState辅助函数访问。
2. Mutations（修改器）
作用：唯一修改 State 的方式，保证状态变更可追踪。
特点：必须是同步函数（便于调试工具记录状态快照），通过
commit触发（如this.$store.commit('mutationName', payload)）。
3. Actions（动作）
作用：处理异步操作（如接口请求），通过
dispatch触发（如this.$store.dispatch('actionName')），最终提交 Mutation 修改 State。特点：可包含任意异步逻辑（API 调用、定时器等），但不能直接修改 State。
4. Getters（计算属性）
作用：对 State 进行加工派生（如过滤列表、计算统计值），类似组件中的 computed。
特点：缓存结果（依赖不变时不重新计算），通过
this.$store.getters或mapGetters访问。
5. Modules（模块）
作用：当 State 过大时，将 Store 拆分为多个模块，每个模块拥有独立的 State、Mutation、Action 等。
特点：支持模块嵌套，避免命名冲突（通过命名空间
namespaced: true隔离）。
三、工作流程（简要）
组件通过 dispatch 触发 Action → Action 处理异步逻辑（如请求 API）→ Action 通过 commit 提交 Mutation → Mutation 同步修改 State → State 变化后，依赖该状态的组件自动更新渲染。
四、使用场景
中大型 SPA：多组件共享状态（如用户登录态、购物车数据、全局主题）；
跨组件通信：非父子组件（如兄弟组件、跨级组件）需频繁同步状态；
状态需持久化：结合 localStorage/sessionStorage 保存状态（如用户 token）。
总结
Vuex 的核心价值是集中式状态管理，通过规范的状态变更流程（Action → Mutation → State），让复杂应用的状态变得可预测、可维护。对于小型应用，可优先用 props/EventBus；中大型应用或需严格状态管理的场景，Vuex 是官方推荐的最佳实践。