Vuex actions 处理异步请求需职责分离：actions 调用 API 并 commit mutation 更新 state，mutation 禁止异步；state 预留 loading、error、data 字段；API 抽离至独立文件便于配置与测试；action 必用 async/await + try/catch；组件中 dispatch 触发并可 await。

Vue2 中用 Vuex 的 actions 处理异步请求，核心是把“发请求”和“改状态”职责分开：actions 负责调用 API、处理加载/错误逻辑，再通过 commit 提交 mutation 来更新 state。不能在 mutation 里写异步代码，这是硬性约束。

定义清晰的 state 结构，预留响应式字段

在 store 的 state 中提前声明与请求相关的字段，比如：

• loading：布尔值，控制按钮禁用、骨架屏显示
• error：字符串或 null，存提示语（如“获取失败，请重试”）
• data 或具体字段名（如 user、list）：存放成功返回的数据，保持结构稳定

API 调用必须抽离到独立文件

不要把 axios 或 fetch 写在 action 里。统一放在 src/api/user.js 或类似路径：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 接口地址、headers、token 自动注入可集中配置
• 方便单元测试时 mock，比如用 vitest 替换真实请求
• TypeScript 类型能准确推导 response 结构，action 内只专注业务流转

action 必须用 async/await 编写，配合 try/catch

每个异步 action 都应是 async 函数，用 await 等待 API 返回，用 try/catch 捕获错误：

立即学习“前端免费学习笔记（深入）”；

• 成功时 commit mutation，传入 data
• 失败时 commit 另一个 mutation（如 SET_ERROR），传入用户友好的提示
• 无论成功失败，最后都 commit 一次 loading 状态切换（通常在 finally 或单独处理）
• 避免混用 .then().catch() 和 await，容易遗漏错误或状态错乱

组件中通过 dispatch 触发，并可选择等待结果

在 Vue2 组件中，使用 this.$store.dispatch('fetchUser') 启动 action：

• 可以搭配 mapActions 辅助函数简化写法
• dispatch 返回 Promise，组件内可 await this.$store.dispatch('fetchUser')，适合需要串行操作的场景（比如登录后跳转）
• 结合 computed 使用 mapState 或 mapGetters，自动响应 state 变化