vue2 中 vuex 实现全局状态管理，需安装 vuex 3.x，定义 state、mutations（同步）、actions（异步），通过 mapstate/mapmutations/mapactions 等辅助函数安全读写，并支持模块化、持久化与权限控制。
Vue2 中用 Vuex 实现全局集中式状态管理，核心是把共享数据统一存到一个 store 里，所有组件按规则读写，避免层层传值或事件总线混乱。它不是“多写几行代码就完事”，而是建立一套可追踪、易维护的状态更新流程。
安装与初始化 store
Vue2 必须使用 Vuex 3.x 版本（如 vuex@3.6.2），安装后在 src/store/index.js 创建 store 实例：
- 调用
Vue.use(Vuex)注册插件 - 定义
state存原始数据（如{ user: null, token: '' }） - 通过
mutations写同步修改逻辑（如SET_USER(state, payload)） - 用
actions处理异步（比如登录请求成功后再 commit mutation） - 导出
new Vuex.Store({ ... })，并在main.js的 Vue 实例中注入store选项
组件中安全读写状态
不直接修改 state，也不在组件里调用 mutation 函数。推荐用辅助函数保持语义清晰：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 读状态：用
mapState映射到 computed（如...mapState(['token'])） - 触发同步变更：用
mapMutations映射到 methods（如...mapMutations(['SET_TOKEN'])） - 触发异步操作：用
mapActions（如...mapActions(['login'])），action 内部再 commit mutation - 需要计算逻辑时，用
mapGetters（比如判断用户是否已登录）
模块化拆分提升可维护性
项目一复杂，就把 store 拆成模块。例如按业务建 modules/user.js 和 modules/cart.js：
- 每个模块有自己的
state、mutations、actions、getters - 开启命名空间
namespaced: true，防止不同模块的 mutation type 冲突 - 组件中调用时加模块前缀，比如
...mapActions('user', ['fetchProfile']) - 模块间可互相调用，但建议只读其他模块的 getter，不直接 commit 其 mutation
配合持久化与安全性
Vuex 默认刷新就丢数据，而登录态这类关键信息需保留：
- 用
vuex-persistedstate插件自动同步 state 到 localStorage - 敏感字段（如 token）不要全量存进 Vuex，只存必要标识，真实凭证仍建议配合 httpOnly cookie 或加密存储
- 路由守卫中可通过
store.state.user判断登录状态，实现权限跳转 - 避免在 mutations 里做异步操作——那是 actions 的职责；也别在 action 里直接改 state
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
