如何在Vuex与TypeScript环境下将Axios请求封装为独立方法

问题根因 #

你遇到的两个问题核心都是违背了Vuex Action的参数规范：所有Vuex Action的第一个参数永远是Vuex注入的上下文对象（包含commit/dispatch/state等属性），你调用dispatch时传入的载荷只会作为Action的第二个参数接收。

400错误原因 #

你当前写的updateUserProfile把第一个参数当做user接收，实际运行时第一个参数拿到的是Vuex的上下文对象，你把上下文对象作为请求体传给后端，格式不符合要求自然返回400，你传入的user参数实际被放到了第二个入参的位置，没有被用到。

类型报错原因 #

Vuex的Action类型定义强制要求第一个参数为上下文对象，你把第一个参数的类型改为User，和Vuex要求的Action类型不匹配，就会触发actions属性类型不兼容的报错。

解决方法 #

方案1：保留updateUserProfile为Vuex Action #

修正updateUserProfile的参数结构，第一个参数留作上下文占位，第二个参数接收user载荷：

// 修正后的updateUserProfile
async updateUserProfile(_: any, user: User): Promise<User> {
  const response = await axios.request({
    method: "PUT",
    url: `/users/me/profile`,
    data: user
  });
  return response.data;
},

// 调用侧代码
async updateProfile({ commit, dispatch }: any, user: User):Promise<User> {
  console.log(user)
  console.log("currentUser")

  const response = await dispatch('updateUserProfile', user);
   
  console.log(response)
  console.log("response")
  return response;
},

方案2（更推荐）：抽离为独立API方法 #

纯请求逻辑不需要作为Vuex Action定义，直接抽离为普通函数即可，既避免Vuex的参数限制，也方便后续其他地方复用：

// 抽离为独立的请求工具函数，不要放在Vuex的actions对象内
const updateUserProfileApi = async (user: User): Promise<User> => {
  const response = await axios.request({
    method: "PUT",
    url: `/users/me/profile`,
    data: user
  });
  return response.data;
}

// Vuex Action中直接调用即可，不需要走dispatch
async updateProfile({ commit }: any, user: User):Promise<User> {
  console.log(user)
  console.log("currentUser")

  const response = await updateUserProfileApi(user);
   
  console.log(response)
  console.log("response")
  return response;
},

内容的提问来源于stack exchange，提问作者Aaron