在 Vue 中使用多个 API 接口需要进行以下配置：在 vuex 中创建模块，定义 API 配置对象；创建 API 类封装 API 请求；使用 mapActions 助手将 API 方法映射到 Vue 组件；组件调用 API 并访问响应。
Vue 多个接口配置
在 Vue 应用中，经常需要从多个不同的 API 接口获取数据。为了有效管理这些接口，需要将它们进行合适的配置。
1. 在 vuex 中创建模块
vuex 是 Vue 中的状态管理库，它提供了一个模块化和可重用的方式来管理应用程序状态。可以通过创建一个专门用于处理 API 请求的模块来组织接口配置。
立即学习“前端免费学习笔记（深入）”；
2. 定义 API 配置对象
在 vuex 模块中，定义一个 API 配置对象，其中包含每个 API 端点的相关信息。该对象通常包含以下属性：
- url：API 端点 URL
- method：HTTP 请求方法（例如 GET、POST）
- headers：HTTP 请求头
- params：查询参数（可选）
- body：请求主体（可选）
3. 创建一个 API 类
创建一个 API 类来封装实际的 API 请求。该类应包含以下方法：
-
request：发送 API 请求并返回 Promise -
get：发送 GET 请求 -
post：发送 POST 请求 -
put：发送 PUT 请求 -
delete：发送 DELETE 请求
4. 在组件中使用 API
可以使用mapActions助手将 API 方法映射到 Vue 组件中。这将使组件能够调用 API 并访问其响应。
5. 示例代码
以下示例展示了如何配置和使用多个接口：
<code>// vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const apiConfig = {
api1: {
url: 'https://example.com/api/v1',
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
},
api2: {
url: 'https://example.com/api/v2',
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: {
name: 'John Doe'
}
}
}
const apiModule = {
state: {},
getters: {},
mutations: {},
actions: {
apiRequest({ commit }, { api, params }) {
const config = apiConfig[api]
return this.$api.request(config, params)
}
}
}
export default new Vuex.Store({
modules: {
api: apiModule
}
})
// 组件中
import { mapActions } from 'vuex'
export default {
computed: {
...mapActions(['apiRequest'])
},
methods: {
async getData() {
const response = await this.apiRequest('api1')
// 使用响应数据
}
}
}</code> 
