在Vue项目里，当页面需要调用多个带不同参数的API接口时，如果把请求逻辑都写在组件内部，很容易出现代码重复、状态难以同步的问题。这时候用Vuex做中心化的状态管理，就能很好地梳理多参数API请求的处理逻辑。
为什么要用Vuex处理多参数API请求
组件内直接写请求的问题很明显：同一个接口在不同组件调用时，参数拼接逻辑要重复写，请求加载、成功、失败的状态也要各自维护，一旦接口参数有调整，所有用到这个接口的组件都要改。而Vuex可以把请求相关的逻辑和状态统一收归到store里，组件只需要触发对应的action，不用关心请求的具体实现，也不用自己维护请求状态。
实现多参数API请求的核心步骤
1. 封装通用请求工具
先封装一个基础的请求方法，统一处理请求头、参数拼接、错误拦截，避免重复写axios配置：
// src/utils/request.js
import axios from 'axios'
const request = axios.create({
baseURL: '/api',
timeout: 10000
})
// 请求拦截器处理参数
request.interceptors.request.use(config => {
// 这里可以统一添加token等公共参数
return config
})
// 响应拦截器处理返回结果
request.interceptors.response.use(
res => {
if (res.data.code === 200) {
return res.data
}
return Promise.reject(res.data.msg)
},
err => Promise.reject(err)
)
export default request2. 拆分Vuex模块管理不同接口
根据业务模块拆分Vuex的store模块，每个模块单独管理对应接口的请求逻辑和状态，避免所有逻辑堆在一个store里：
// src/store/modules/user.js
import request from '@/utils/request'
const state = {
// 存储用户信息列表
userList: [],
// 请求状态：loading/success/failed
userListStatus: 'idle',
// 错误信息
userListError: ''
}
const mutations = {
SET_USER_LIST_LOADING(state) {
state.userListStatus = 'loading'
state.userListError = ''
},
SET_USER_LIST_SUCCESS(state, payload) {
state.userListStatus = 'success'
state.userList = payload
},
SET_USER_LIST_FAILED(state, payload) {
state.userListStatus = 'failed'
state.userListError = payload
}
}
const actions = {
// 多参数请求：接收分页、筛选条件等参数
fetchUserList({ commit }, params) {
commit('SET_USER_LIST_LOADING')
// params可以包含page、pageSize、name、role等多个参数
return request({
url: '/user/list',
method: 'get',
params: params
}).then(res => {
commit('SET_USER_LIST_SUCCESS', res.data)
return res.data
}).catch(err => {
commit('SET_USER_LIST_FAILED', err.message || '请求失败')
throw err
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}3. 组件中调用多参数请求
组件里只需要传入对应的参数，触发action即可，不用关心请求的具体实现：
// src/views/UserList.vue
export default {
data() {
return {
// 组件内的筛选参数
queryParams: {
page: 1,
pageSize: 10,
name: '',
role: ''
}
}
},
computed: {
// 映射store里的状态
...mapState('user', ['userList', 'userListStatus', 'userListError'])
},
methods: {
...mapActions('user', ['fetchUserList']),
// 点击查询时触发请求，传入多参数
handleSearch() {
this.fetchUserList(this.queryParams).catch(err => {
this.$message.error(err)
})
}
},
mounted() {
// 初始化时请求第一页数据
this.handleSearch()
}
}多参数场景的优化技巧
- 参数规范化：对于可选参数，可以在action里做默认值处理，避免传入undefined导致请求异常，比如给page默认设为1，pageSize默认设为10。
- 请求去重：如果短时间内多次触发相同参数的请求，可以在action里加一个简单的防抖或者缓存逻辑，避免不必要的重复请求。
- 状态复用：如果多个组件需要用到同一个接口的数据，不需要各自请求，直接从store里取状态即可，减少接口调用次数。
注意事项
不要在mutation里直接写异步请求逻辑，所有的API请求都要放在action里处理，mutation只负责同步修改状态。另外如果参数特别复杂，可以把参数处理的方法单独抽成工具函数，保持action的逻辑简洁。
通过上面的方式，多参数API请求的逻辑就完全收归到Vuex的模块里，组件只需要关心参数和状态的使用，代码的可维护性和复用性都会有明显提升。