当前位置：首页 > news >正文

如何正确使用 `apiStore` 进行 API 管理

news 来源：原创 2025/6/8 13:17:39

在现代前端开发中，API 管理是一个非常重要的环节。apiStore 是一个基于 Pinia 的状态管理工具，它可以帮助我们更高效地管理和调用 API。本文将详细介绍如何正确使用 apiStore，包括如何创建 API 配置文件、在组件中使用 apiStore 以及如何配置通用的 API 配置。

apiStore的源代码来至于vue3_project_base，推荐通过fork vue3_project_base来获取。

1. 创建 API 配置文件

首先，我们需要在 src/api-configs/ 目录下创建 API 配置文件。每个配置文件对应一个 API 接口，并且需要导出默认配置对象。以下是一个示例：

// src/api-configs/userApi.ts
export default {
  method: 'get', // 请求方法, 必须
  url: '/user', // 请求 URL, 必须
  transformParam: (param: any) => {
    // 可选，用于在发送请求前对参数进行处理
    return param
  },
  transformResponse: (response: any) => {
    // 可选，用于在接收到响应后对数据进行处理
    return response.data
  },
  defaultValue: [], // 可选，设置默认值
}

在这个配置文件中，我们定义了请求方法、URL、参数转换函数、响应转换函数以及默认值。这些配置项可以根据实际需求进行调整。

2. 在组件中使用 `apiStore`

在 Vue 组件中，我们可以通过 useApiStore 来获取 apiStore 的实例，并调用相应的 API 方法。以下是一个示例：

<template>
  <div>
    <div v-if="apiStore.apiStates.userApi.loading">Loading...</div>
    <div v-else>
      <div v-if="apiStore.apiStates.userApi.data">
        User Data: {{ apiStore.apiStates.userApi.data }}
      </div>
      <div v-if="apiStore.apiStates.userApi.error">
        Error: {{ apiStore.apiStates.userApi.error }}
      </div>
    </div>
    <button @click="fetchUser">Fetch User</button>
  </div>
</template>

<script setup>
import { useApiStore } from '@/core/apiStore'

const apiStore = useApiStore()

const fetchUser = async () => {
  try {
    const userData = await apiStore.userApi({ id: 1 })
    console.log('User Data:', userData)
  } catch (error) {
    console.error('Failed to fetch user:', error)
  }
}
</script>

在这个示例中，我们首先通过 useApiStore 获取了 apiStore 的实例。然后，我们定义了一个 fetchUser 方法，该方法调用了 apiStore.userApi 来获取用户数据。在模板中，我们根据 apiStates.userApi 的状态来显示加载中、数据或错误信息。

3. 配置通用的 API 配置

在某些情况下，我们可能希望为多个 API 接口配置相同的默认值或处理逻辑。这时，我们可以在 src/api-configs/common.ts 中定义通用的配置。以下是一个示例：

// src/api-configs/common.ts
export default {
  method: 'get',
  transformParam: (param: any) => {
    // 可选，用于在发送请求前对参数进行处理
    return param
  },
  transformResponse: (response: any) => {
    // 可选，用于在接收到响应后对数据进行处理
    return response.data
  },
  defaultValue: [], // 可选，设置默认值
}

在 apiStore 中，通用配置会与每个 API 的配置进行合并，作为默认配置。这意味着，如果某个 API 没有定义特定的配置项，它将使用通用配置中的值。

4. 参考示例

为了更好地理解如何使用 apiStore，可以参考 src/core/views/Home.vue 中的示例代码。该示例展示了如何在组件中使用 apiStore 来管理 API 调用和状态。

通过 apiStore，我们可以更高效地管理和调用 API。首先，我们需要在 src/api-configs/ 目录下创建 API 配置文件。然后，在组件中通过 useApiStore 获取 apiStore 的实例，并调用相应的 API 方法。最后，我们可以通过 src/api-configs/common.ts 配置通用的 API 配置，以减少重复代码。

希望本文能帮助你更好地理解和使用 apiStore，提升你的前端开发效率。