Vue2状态管理如何使用 Vuex 实现全局集中式状态管理

Vue2 中 Vuex 实现全局状态管理，需安装 Vuex 3.x，定义 state、mutations（同步）、actions（异步），通过 mapState/mapMutations/mapActions 等辅助函数安全读写，并支持模块化、持久化与权限控制。

Vue2 中用 Vuex 实现全局集中式状态管理，核心是把共享数据统一存到一个 store 里，所有组件按规则读写，避免层层传值或事件总线混乱。它不是“多写几行代码就完事”，而是建立一套可追踪、易维护的状态更新流程。

安装与初始化 store

Vue2 必须使用 Vuex 3.x 版本（如 [email protected]），安装后在 src/store/index.js 创建 store 实例：

1. 调用 Vue.use(Vuex) 注册插件
2. 定义 state 存原始数据（如 { user: null, token: '' }）
3. 通过 mutations 写同步修改逻辑（如 SET_USER(state, payload)）
4. 用 actions 处理异步（比如登录请求成功后再 commit mutation）
5. 导出 new Vuex.Store({ ... })，并在 main.js 的 Vue 实例中注入 store 选项

组件中安全读写状态

不直接修改 state，也不在组件里调用 mutation 函数。推荐用辅助函数保持语义清晰：

1. 读状态：用 mapState 映射到 computed（如 ...mapState(['token'])）
2. 触发同步变更：用 mapMutations 映射到 methods（如 ...mapMutations(['SET_TOKEN'])）
3. 触发异步操作：用 mapActions（如 ...mapActions(['login'])），action 内部再 commit mutation
4. 需要计算逻辑时，用 mapGetters（比如判断用户是否已登录）

模块化拆分提升可维护性

项目一复杂，就把 store 拆成模块。例如按业务建 modules/user.js 和 modules/cart.js：

1. 每个模块有自己的 state、mutations、actions、getters
2. 开启命名空间 namespaced: true，防止不同模块的 mutation type 冲突
3. 组件中调用时加模块前缀，比如 ...mapActions('user', ['fetchProfile'])
4. 模块间可互相调用，但建议只读其他模块的 getter，不直接 commit 其 mutation

配合持久化与安全性

Vuex 默认刷新就丢数据，而登录态这类关键信息需保留：

1. 用 vuex-persistedstate 插件自动同步 state 到 localStorage
2. 敏感字段（如 token）不要全量存进 Vuex，只存必要标识，真实凭证仍建议配合 httpOnly cookie 或加密存储
3. 路由守卫中可通过 store.state.user 判断登录状态，实现权限跳转
4. 避免在 mutations 里做异步操作——那是 actions 的职责；也别在 action 里直接改 state