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;
  }
}