Pinia 的 Actions 是处理异步请求的核心，应统一用 async/await 编写，配合 loading/error/data 状态管理生命周期，API 调用需抽离至独立模块，并可选集成 AbortController 支持取消请求。
Pinia 的 Actions 是处理异步请求的核心位置，推荐把接口调用、数据加载、错误处理和状态更新都封装在 Action 内，保持 Store 的逻辑内聚、可测试、易维护。
统一用 async/await 编写异步 Action
所有涉及网络请求的 Action 都应声明为 async 函数，并用 await 等待 Promise 完成。避免混用 .then()，保证逻辑线性、错误可捕获。
示例：
actions: {
async fetchUserProfile(id) {
this.loading = true;
this.error = null;
try {
const res = await api.getUser(id);
this.profile = res.data;
} catch (err) {
this.error = err.response?.data?.message || '加载失败';
throw err; // 如需在组件中进一步处理，可继续抛出
} finally {
this.loading = false;
}
}
}
配合状态字段管理请求生命周期
在 Store 中定义配套的响应式状态，如 loading、error、data，让组件能直观反映请求状态。
建议包含以下基础字段：
- loading：布尔值，标识当前是否有请求进行中
- error：字符串或 null，存放用户友好的错误提示
- data（或具体字段如 list、profile）：存放成功响应的数据
复用请求逻辑：抽离 API 调用层
不要在 Action 里直接写 axios 或 fetch 调用。应将接口请求封装到独立的 api 模块（如 src/api/user.ts），Action 只负责调度和状态流转。
好处包括：
- 接口地址、拦截器、鉴权逻辑集中管理
- 便于 Mock、单元测试和类型推导
- Action 更轻量，专注业务状态而非网络细节
支持取消请求（可选但推荐）
对搜索、自动补全等高频请求场景，可在 Action 中使用 AbortController 主动取消上一次未完成的请求，避免状态错乱。
示例片段：
async searchUsers(keyword) {
if (this.abortController) this.abortController.abort();
this.abortController = new AbortController();
this.loading = true;
try {
const res = await api.searchUsers(keyword, {
signal: this.abortController.signal
});
this.results = res.data;
} catch (err) {
if (err.name !== 'AbortError') {
this.error = '搜索失败';
}
} finally {
this.loading = false;
}
}
