1. 项目概述：为什么一个 Vue 项目迟早要和 Vuex 打交道

我带过不下二十个前端团队，从三五人的小作坊到百人规模的中台部门，几乎每个用 Vue.js 做中大型应用的团队，都会在项目上线前两个月左右，突然集体陷入一种“状态混乱焦虑症”——组件之间传参像打游击，父子通信靠 props 和 $emit，兄弟组件通信靠事件总线（EventBus），跨层级通信靠 provide/inject，再复杂点就靠 localStorage 硬扛。结果就是：某个按钮点击后，三个页面同时刷新、两个弹窗莫名关闭、用户填写的表单数据在路由跳转后凭空消失……最后排查两小时，发现是某个子组件悄悄改了父组件传来的对象引用，而这个对象又被另一个组件 watch 着——整个状态链像一根绷紧又打结的橡皮筋，一碰就崩。

这就是 Vuex 存在的根本理由：它不是为“炫技”而生，而是为“止损”而来。Vuex 是 Vue 官方推荐的状态管理库，核心价值在于强制约定状态变更路径、集中存储共享数据、提供可追溯的变更记录。它不解决“怎么写组件”，而是解决“当组件越来越多、交互越来越复杂时，谁在什么时候、以什么方式、改了哪部分数据”这个元问题。你不需要在 Vue 2 项目里一开始就上 Vuex——我见过太多团队在只有两个页面时就急着搭 store，结果半年后发现 80% 的 mutation 永远不会被调用；但你也绝不能等到所有页面都耦合成一团毛线球时才想起它——那时重构成本远超重写。

标题里这个“Managing Vue.js State with Vuex”，说白了就是给整个应用装上一套交通管制系统：路口（组件）不再各自为政地指挥车流（数据），而是统一听从交通指挥中心（store）调度；每辆车出发（dispatch action）、转弯（commit mutation）、到达（state 更新）都必须登记备案（devtools 可追踪）；连红绿灯规则（getter 计算逻辑）都写进《城市交通法典》（store/index.js），而不是贴在每个路口的电线杆上。关键词里的getter、mutation，正是这套系统的两个关键执法环节：mutation 是唯一允许直接修改 state 的“红灯禁行区”，必须同步执行；getter 是只读的“路况显示屏”，用于派生计算，不触发更新。至于热搜词里反复出现的“vue3 中使用 Pinia 还是 Vuex”，我的实操结论很直接：新项目无脑选 Pinia，但维护老项目、对接历史模块、或团队已深度绑定 Vuex 生态（比如有大量现成的 Vuex 插件、中间件、devtools 扩展），那 Vuex 依然是最稳的选择——它不是过时，而是被更轻量的方案部分替代，就像 jQuery 没死，只是不再被默认推荐。

2. Vuex 的核心设计哲学与五大模块拆解

2.1 为什么是这五个属性？它们不是并列关系，而是有严格因果链

Vuex 的 store 由state、getters、mutations、actions、modules五部分构成，但新手常误以为这是五个“平级功能模块”。实际上，它们构成了一条不可逆的数据流闭环：state 是源头活水，getters 是它的过滤器，mutations 是它的唯一阀门，actions 是触发阀门的遥控器，modules 是把大水池划成小格子的隔板。理解这个链条，比死记硬背“五个属性”重要十倍。

• state：它不是普通对象，而是 Vue 实例化时通过new Vue({ data: state })注入的响应式根对象。这意味着：你对 state 的任何属性增删（如state.user = { name: '张三' }）都会被 Vue 的响应式系统自动侦测，但直接赋值新对象（如state = { user: {} }）会彻底切断响应式——因为 Vue 无法劫持变量赋值操作。所以 Vuex 强制要求：state 必须是函数返回的对象（export default () => ({ user: null })），确保每次创建 store 实例都是全新响应式对象。

• getters：它本质是 store 的 computed 属性。关键点在于：getters 接收 state 作为第一个参数，但可以接收其他 getters 作为第二个参数（即getters对象本身）。这使得你可以构建计算链：比如userFullNamegetter 依赖userName和userLastName，而userName又依赖userProfile。这种嵌套依赖会被 Vue 自动追踪，只要底层 state 变，所有相关 getter 都会重新求值。但注意：getters 默认不缓存，除非你在组件中通过mapGetters映射为计算属性，或在 setup() 中用computed(() => store.getters.xxx)包裹——否则每次访问store.getters.xxx都会重新执行函数。

• mutations：这是 Vuex 最易被误解的部分。“mutation” 本意是“突变”，但 Vuex 给它加了三重枷锁：

  1. 必须同步：你不能在 mutation 里写setTimeout或axios.get()，因为 devtools 需要精确捕获“前一刻 state 是什么，这一刻 commit 后 state 变成什么”。异步操作会破坏这个时间戳链。
  2. 必须命名：每个 mutation 必须有字符串类型名（如'SET_USER_INFO'），而非匿名函数。这是为了 devtools 能显示可读日志（“用户信息已更新” vs “[object Object]”）。
  3. 必须单一职责：一个 mutation 只做一件事。比如SET_USER_INFO只负责合并用户数据，不负责清除 token；CLEAR_AUTH只负责清空认证字段，不负责跳转登录页。这样单元测试才好写，回滚才可控。

• actions：它是 mutations 的“管家”。action 本身不改 state，只负责：

  • 调用异步 API（如await api.getUser()）
  • 根据 API 结果，分发（dispatch）多个 mutation（如commit('SET_USER_INFO', res.data)+commit('SET_USER_PERMISSIONS', res.permissions)）
  • 处理错误分支（如catch中commit('SET_ERROR', err.message)）
    关键细节：action 函数接收context对象，它包含{ commit, dispatch, state, getters, rootState, rootGetters }。但实际编码中，我们几乎总是用 ES6 解构来简化：export function fetchUser({ commit, getters }, userId) { ... }。这里getters是当前 module 的 getters，若需跨 module，必须显式写context.rootGetters['otherModule/someGetter']。

• modules：当 state 膨胀到上千行，你不可能把所有数据塞进一个index.js。modules 就是把 store 拆成多个子 store。每个 module 可有自己的 state、getters、mutations、actions。但要注意：module 的 state 默认是局部的，而 getters/mutations/actions 默认注册在全局命名空间。这意味着：如果你有两个 module 都定义了setLoadingmutation，不加命名空间就会冲突。解决方案是开启namespaced: true，然后通过store.commit('user/setLoading', true)显式调用。我建议：所有 module 必须开启 namespaced，这是避免后期“命名地狱”的唯一防线。

2.2 五大模块如何协同工作？一个真实登录流程的全链路还原

我们以最常见的“用户登录”场景为例，走一遍 Vuex 全流程，看五个模块如何咬合：

1. 用户点击登录按钮→ 组件中调用this.$store.dispatch('user/login', { username, password })
   （触发 actions）

2. actions 接收参数，发起 API 请求：

   // modules/user.js const actions = { async login({ commit, dispatch }, payload) { commit('SET_LOADING', true); // 同步更新 loading 状态 try { const res = await api.login(payload); // 异步请求 commit('SET_USER_INFO', res.user); // 提交用户数据 commit('SET_TOKEN', res.token); dispatch('app/setLoginStatus', true, { root: true }); // 调用根 module } catch (err) { commit('SET_ERROR', err.message); throw err; // 便于组件捕获 } finally { commit('SET_LOADING', false); } } };

   （actions 协调异步，分发多个 mutation）

3. mutations 执行具体变更：

   const mutations = { SET_LOADING(state, isLoading) { state.loading = isLoading; // 直接修改 state 属性 }, SET_USER_INFO(state, userInfo) { // 使用 Vue.set 确保新增属性响应式 Vue.set(state, 'userInfo', { ...userInfo }); }, SET_TOKEN(state, token) { state.token = token; // 同时写入 localStorage，保证刷新不丢失 localStorage.setItem('auth_token', token); } };

   （mutations 是唯一修改 state 的入口，且必须同步）

4. getters 提供派生状态：

   const getters = { isLoggedIn: state => !!state.token, userName: state => state.userInfo?.name || '游客', userPermissions: (state, getters) => { // 依赖其他 getter，实现权限组合 return getters.isLoggedIn ? state.userInfo?.permissions : []; } };

   （getters 从 state 派生出业务语义更强的状态）

5. 组件中消费：

   <template> <div v-if="isLoggedIn"> <h2>欢迎，{{ userName }}！</h2> <button @click="logout" v-if="hasPermission('admin')">后台管理</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex'; export default { computed: { ...mapGetters('user', ['isLoggedIn', 'userName']), ...mapGetters(['hasPermission']) // 从根 getters 获取 }, methods: { ...mapActions('user', ['logout']) } } </script>

   （组件通过 mapXXX 工具函数，将 store 能力映射为本地属性/方法）

这个流程清晰展示了：state 是数据容器，getters 是数据加工厂，mutations 是数据手术刀，actions 是手术室主任，modules 是划分科室的医院架构。任何环节缺失或错位，都会导致状态失控。

3. 从零搭建 Vuex Store：手把手配置与避坑指南

3.1 初始化 Store：Vue 2 与 Vue 3 的关键差异

虽然标题是 “Managing Vue.js State with Vuex”，但必须明确：Vuex 4 是专为 Vue 3 设计的版本，Vuex 3 仅支持 Vue 2。很多团队踩坑源于混淆版本。以下是两个版本初始化的核心代码对比与原理说明：

Vue 2 + Vuex 3（经典写法）：

npm install vuex@3

// store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 必须调用，注册 Vuex 插件 export default new Vuex.Store({ state: { count: 0 }, mutations: { INCREMENT(state) { state.count++; } } });

// main.js import store from './store'; new Vue({ store, // 直接注入 render: h => h(App) }).$mount('#app');

提示：Vue.use(Vuex)是关键一步。它会向 Vue 构造函数注入$store实例，并在所有组件中可用。如果忘记这行，this.$store将是 undefined。

Vue 3 + Vuex 4（Composition API 友好）：

npm install vuex@4

// store/index.js import { createStore } from 'vuex'; export default createStore({ state() { return { count: 0 }; }, mutations: { INCREMENT(state) { state.count++; } } });

// main.js import { createApp } from 'vue'; import { store } from './store'; // 注意：Vuex 4 的 store 是普通对象，非 Vue 插件 import App from './App.vue'; const app = createApp(App); app.use(store); // 调用 use 方法安装 app.mount('#app');

注意：Vuex 4 不再需要Vue.use()，而是通过app.use(store)注册。这是因为 Vue 3 的插件机制改为函数式，createStore返回的是一个符合插件协议的对象。

为什么必须区分？因为 Vuex 4 移除了对 Vue 2 的兼容层，其内部完全基于 Vue 3 的响应式 API（reactive,ref）重构。如果你在 Vue 3 项目中错误安装 Vuex 3，控制台会报错Cannot read property 'use' of undefined；反之，在 Vue 2 项目装 Vuex 4，则store无法被 Vue 实例识别。

3.2 Modules 模块化实战：如何科学划分 Store 结构

一个中型电商项目，store 目录结构应该长什么样？我给出经过 7 个项目验证的黄金模板：

store/ ├── index.js # 根 store 配置，合并所有 modules ├── modules/ │ ├── user.js # 用户认证、个人信息 │ ├── cart.js # 购物车状态、商品列表 │ ├── product.js # 商品详情、分类树、搜索历史 │ └── order.js # 订单列表、订单详情、支付状态 ├── plugins/ # 自定义插件目录（如持久化、日志） │ └── persist.js # 将 state 持久化到 localStorage └── utils/ # 工具函数（如 deepClone, mergeState）

每个 module 的标准写法（以 user.js 为例）：

// store/modules/user.js const state = () => ({ token: localStorage.getItem('auth_token') || '', userInfo: null, loading: false, error: null }); const getters = { isLoggedIn: state => !!state.token, userName: state => state.userInfo?.name || '游客', // 注意：getter 名称应体现业务语义，而非技术动作 hasTokenExpired: state => { if (!state.token) return true; const payload = JSON.parse(atob(state.token.split('.')[1])); return Date.now() >= payload.exp * 1000; } }; const mutations = { // 命名规范：动词+名词，全部大写，下划线分隔 SET_TOKEN(state, token) { state.token = token; if (token) { localStorage.setItem('auth_token', token); } else { localStorage.removeItem('auth_token'); } }, SET_USER_INFO(state, userInfo) { // 使用 Vue.set 或 Object.assign 确保响应式 state.userInfo = { ...userInfo }; }, SET_LOADING(state, isLoading) { state.loading = isLoading; }, SET_ERROR(state, error) { state.error = error; } }; const actions = { // action 名称用驼峰，体现业务意图 async login({ commit, dispatch }, credentials) { commit('SET_LOADING', true); try { const res = await api.login(credentials); commit('SET_TOKEN', res.token); commit('SET_USER_INFO', res.user); // 登录成功后，自动获取用户权限 await dispatch('fetchPermissions'); } catch (err) { commit('SET_ERROR', err.response?.data?.message || '登录失败'); throw err; } finally { commit('SET_LOADING', false); } }, async fetchPermissions({ commit, state }) { if (!state.token) return; try { const res = await api.getPermissions(); // 权限数据通常需要合并到 userInfo 中 commit('SET_USER_INFO', { ...state.userInfo, permissions: res }); } catch (err) { console.error('获取权限失败', err); } } }; // 必须导出 namespaced: true export default { namespaced: true, state, getters, mutations, actions };

关键避坑点：

• state 必须是函数：防止多个 store 实例共享同一对象引用。
• localStorage 同步时机：SET_TOKEN中同时操作state.token和localStorage，确保内存与磁盘一致；CLEAR_TOKEN时必须removeItem，否则下次启动仍会读取旧 token。
• mutation 命名一致性：全大写+下划线是社区约定，比setToken更易在 devtools 中识别。
• action 错误处理：try/catch中throw err是为了让调用方（组件）能await dispatch().catch()，实现错误冒泡。

3.3 DevTools 集成：不只是看状态，更是调试利器

Vuex DevTools 是 Chrome 和 Edge 浏览器的官方扩展，但它绝不仅是“查看 state”的工具。我把它当作 Vue 应用的“黑匣子”，日常调试三大核心用法：

1. 时间旅行（Time Travel）：
点击 devtools 中的任意一次 mutation 记录，state 会瞬间回滚到该时刻。这让你能精准复现“用户点了什么按钮后页面变空白”这类问题。操作路径：DevTools → “Mutation” 标签 → 点击某条记录左侧的 ▶️ 按钮。

2. 提交过滤与搜索：
大型项目 mutation 数量庞大，可直接在顶部搜索框输入USER_，只显示用户模块相关变更；或点击右上角齿轮图标，勾选 “Filter commits by module”，按 module 分组查看。

3. 手动触发 Mutation（高级技巧）：
在 “Mutation” 标签页，点击右上角 “+” 按钮，可手动输入 mutation 名称和 payload，模拟任意状态变更。例如：输入USER/SET_ERROR，payload 填{"message": "网络超时"}，立即看到错误提示是否正确渲染——这比写测试用例快十倍。

安装与启用步骤：

1. Edge 浏览器：打开 Microsoft Edge Add-ons 商店，搜索 “Vue.js devtools”，点击“获取”安装。
2. 在 Vue 项目中，确保 store 创建时传入devtools: true（Vue 2 默认开启，Vue 3 需显式设置）：

   // Vue 3 + Vuex 4 export default createStore({ // ...其他配置 devtools: process.env.NODE_ENV === 'development' // 仅开发环境开启 });

3. 启动项目，在浏览器按 F12，切换到 “Vue” 标签页，即可看到 Vuex 面板。

注意：如果看不到 Vuex 标签，请检查：① 是否安装了最新版 Vue Devtools（非旧版 Vue.js devtools）；② 项目是否在本地http://localhost运行（生产环境域名默认禁用）；③ store 是否正确app.use(store)。

4. 核心实操环节：从需求到代码的完整落地

4.1 场景还原：购物车状态管理——为什么不能只用组件 data？

假设你正在开发一个电商首页，顶部导航栏需显示购物车商品数量（如 “购物车 (3)”），而商品列表页的每个商品卡片都有“加入购物车”按钮。表面看，这似乎可以用一个全局 event bus 解决：

• 商品卡片点击 →bus.$emit('add-to-cart', item)
• 导航栏监听 →bus.$on('add-to-cart', () => this.cartCount++)

但很快你会遇到三个致命问题：

1. 状态不一致：用户在商品页点击“加入”，导航栏数字+1；但用户刷新页面，数字归零——因为 event bus 数据不持久。
2. 来源不可溯：当 cartCount 突然变成 999，你无法知道是哪个组件、在什么条件下触发的。
3. 逻辑碎片化：计算“总价”、“是否满减”、“商品去重”等逻辑散落在各个组件的 methods 里，修改一处，八处报错。

Vuex 的解法是：把购物车抽象为一个独立的业务实体，其状态、行为、规则全部收口到 cart module。

cart module 完整代码：

// store/modules/cart.js const state = () => ({ items: [], // 商品数组，每个 item 包含 id, name, price, quantity loading: false, error: null }); const getters = { // 购物车总数量（所有商品数量之和） totalCount: state => state.items.reduce((sum, item) => sum + item.quantity, 0), // 购物车总金额（单价 * 数量 求和） totalPrice: state => state.items.reduce((sum, item) => sum + item.price * item.quantity, 0), // 是否为空 isEmpty: state => state.items.length === 0, // 获取指定商品（用于判断是否已存在） itemById: state => id => state.items.find(item => item.id === id), // 满减活动：满 200 减 20 discountAmount: (state, getters) => getters.totalPrice >= 200 ? 20 : 0, finalPrice: (state, getters) => getters.totalPrice - getters.discountAmount }; const mutations = { // 添加商品：已存在则 quantity+1，否则 push 新 item ADD_ITEM(state, newItem) { const existing = state.items.find(item => item.id === newItem.id); if (existing) { existing.quantity += 1; } else { state.items.push({ ...newItem, quantity: 1 }); } }, // 更新商品数量 UPDATE_QUANTITY(state, { id, quantity }) { const item = state.items.find(item => item.id === id); if (item) { item.quantity = Math.max(1, quantity); // 至少为 1 } }, // 删除商品 REMOVE_ITEM(state, id) { state.items = state.items.filter(item => item.id !== id); }, // 清空购物车 CLEAR_CART(state) { state.items = []; }, SET_LOADING(state, isLoading) { state.loading = isLoading; }, SET_ERROR(state, error) { state.error = error; } }; const actions = { // 异步添加：先校验库存，再更新 async addItem({ commit, getters }, item) { commit('SET_LOADING', true); try { // 模拟 API 校验库存 const stock = await api.checkStock(item.id); if (stock < 1) { throw new Error(`${item.name} 库存不足`); } // 库存充足，执行本地添加 commit('ADD_ITEM', item); // 触发全局通知（可选） this._vm.$message.success(`${item.name} 已加入购物车`); } catch (err) { commit('SET_ERROR', err.message); throw err; } finally { commit('SET_LOADING', false); } }, // 批量添加（如从收藏夹一键加入） addItems({ commit }, items) { items.forEach(item => commit('ADD_ITEM', item)); }, // 同步购物车：从服务器拉取最新状态（如用户在其他设备操作后） async syncCart({ commit, state }) { try { const serverCart = await api.getCart(); // 服务端返回的是完整 cart 数组，直接替换本地 state commit('REPLACE_CART', serverCart); } catch (err) { console.error('同步购物车失败', err); } } }; // 注意：这里我们额外定义了一个 mutation 用于替换整个 cart // 因为服务端返回的 cart 可能包含本地没有的字段（如优惠券信息） const REPLACE_CART = (state, serverItems) => { state.items = serverItems.map(item => ({ id: item.id, name: item.name, price: item.price, quantity: item.quantity, // 保留服务端特有字段 coupon: item.coupon })); }; export default { namespaced: true, state, getters, mutations: { ...mutations, REPLACE_CART }, actions };

组件中调用示例（商品卡片）：

<template> <div class="product-card"> <h3>{{ product.name }}</h3> <p>¥{{ product.price }}</p> <button @click="addToCart" :disabled="isAdding"> {{ isAdding ? '添加中...' : '加入购物车' }} </button> </div> </template> <script> import { mapActions, mapState, mapGetters } from 'vuex'; export default { props: { product: { type: Object, required: true } }, data() { return { isAdding: false }; }, methods: { // 映射 cart module 的 action ...mapActions('cart', ['addItem']), async addToCart() { this.isAdding = true; try { await this.addItem(this.product); } catch (err) { this.$message.error(err.message); } finally { this.isAdding = false; } } } }; </script>

导航栏中显示数量（全局组件）：

<template> <nav class="header"> <router-link to="/cart">购物车 ({{ cartCount }})</router-link> </nav> </template> <script> import { mapState, mapGetters } from 'vuex'; export default { computed: { // 直接使用 cart module 的 getter ...mapGetters('cart', ['totalCount']), cartCount() { return this.totalCount; } } }; </script>

这个例子证明：Vuex 不是增加复杂度，而是把隐式的、分散的、易出错的状态流转，变成显式的、集中的、可测试的业务契约。当你需要新增“购物车分享”功能时，只需在 cart module 中添加shareCartaction 和对应 mutation，所有组件自动获得能力，无需修改任何视图代码。

4.2 持久化插件：让购物车在刷新后依然存在

Vuex 默认是内存状态，页面刷新即丢失。但购物车、用户偏好等数据必须持久化。官方不提供内置方案，但社区有成熟插件vuex-persistedstate。不过，我更推荐手写一个轻量级持久化插件，原因有三：

1. vuex-persistedstate会序列化整个 state，若 state 包含函数、Date 对象、RegExp，会导致JSON.stringify报错；
2. 它默认持久化所有 state，但你可能只想存 cart，不想存 loading 状态；
3. 手写插件能精准控制序列化/反序列化逻辑，比如对 token 做加密存储。

自定义持久化插件代码（store/plugins/persist.js）：

// store/plugins/persist.js export default function createPersistPlugin(options = {}) { const { key = 'vuex-store', // localStorage key paths = [], // 需要持久化的 state 路径，如 ['cart.items', 'user.token'] storage = window.localStorage // 可替换为 sessionStorage 或自定义存储 } = options; // 从 storage 加载初始 state let savedState = {}; try { const json = storage.getItem(key); if (json) { savedState = JSON.parse(json); } } catch (e) { console.warn('Failed to load persisted state', e); } // 创建插件函数 return store => { // 初始化：将 savedState 合并到当前 store.state if (Object.keys(savedState).length > 0) { // 递归合并，只覆盖 paths 指定的路径 paths.forEach(path => { const keys = path.split('.'); let target = store.state; let source = savedState; for (let i = 0; i < keys.length - 1; i++) { target = target[keys[i]]; source = source[keys[i]]; } if (target && source && keys[keys.length - 1] in source) { target[keys[keys.length - 1]] = source[keys[keys.length - 1]]; } }); } // 订阅 mutation，当指定路径的 state 变更时，保存到 storage store.subscribe((mutation, state) => { // 只监听 paths 中的路径变更 for (const path of paths) { const keys = path.split('.'); let current = state; for (const key of keys) { if (current && typeof current === 'object') { current = current[key]; } else { break; } } if (current !== undefined) { // 该路径有值，需要保存 try { const json = JSON.stringify(savedState); storage.setItem(key, json); } catch (e) { console.warn('Failed to save persisted state', e); } break; // 找到一个就保存，避免重复 } } }); }; }

在 store/index.js 中使用：

import createPersistPlugin from './plugins/persist'; const store = createStore({ // ...其他配置 plugins: [ createPersistPlugin({ key: 'my-shop-store', paths: ['cart.items', 'user.token', 'app.theme'] // 精确控制哪些数据持久化 }) ] });

提示：这个插件的关键优势在于paths参数。它允许你声明式地指定“只存 cart.items 数组，不存 cart.loading 状态”，避免把临时状态也写入 localStorage，导致下次启动时 loading 一直为 true。

5. 常见问题与排查技巧实录：那些文档里不会写的坑

5.1 典型问题速查表：从报错信息直击根源

5.2 我踩过的三个深坑与独家解决方案

坑一：在 mutation 中使用this导致 this 指向丢失
现象：mutation 函数里写了this.$http.get(...)，运行时报错Cannot read property 'get' of undefined。
原因：Vuex 的 mutation 是纯函数，不绑定任何上下文，this指向undefined（严格模式下）。
解决方案：绝对不要在 mutation 中访问this。API 调用必须放在 action 中，mutation 只负责同步更新 state。如果确实需要在 mutation 中访问全局对象（如 router），应在 store 创建时通过插件注入：

// store/index.js import router from '@/router'; export default createStore({ // ... plugins: [ store => { // 将 router 注入 store 实例 store.router = router; } ] }); // mutation 中 SET_ROUTE(state, route) { store.router.push(route); // 此时 store.router 可用 }

坑二：getters 中的异步操作导致无限循环
现象：在 getter 中写了async function getUser() { return await api.getUser(); }，页面卡死。
原因：getter 必须是同步函数，返回值会被 Vue 的响应式系统追踪。async函数返回 Promise，Promise 对象没有响应式属性，导致 Vue 无法建立依赖关系，进而反复求值。
解决方案：getters 中禁止任何异步操作。需要异步数据，必须：

• 在 action 中获取，