为什么使用Vuex模块更新数据时FormData无法正常发送到服务端？

核心问题根因 #

Vuex 中的 action 仅支持接收 2 个参数：第一个是 store 上下文对象（即你代码中的{commit}部分），第二个是唯一的载荷参数。你在定义udpateUsersaction 时写了 4 个形参，实际调用时只有第一个自定义参数userID能被正确接收，后续的formData、config均为 undefined，导致请求发送时没有携带数据。你猜测的 commit 部分并不是核心问题，不过你的 commit 逻辑也存在可优化的错误。

修复步骤 #

1. 修改组件中 action 的调用逻辑

把所有需要传递的参数打包为一个对象作为载荷传入：

methods:{
  ...mapActions(['udpateUsers']),
  Update(userID){
    let formData = new FormData();
    formData.append('new_name',this.editUser.new_name);
    formData.append('_method', 'PUT');      
    let config = {
      headers:{
        'Content-Type':'multipart/form-data',         
      }        
    }
    // 改为传递单个对象载荷
    this.udpateUsers({
      userID,
      formData,
      config
    });
  }
}

2. 修改 Vuex 模块中 action 的参数接收逻辑

从载荷对象中解构出需要的字段：

actions:{
  // 第二个参数是完整载荷对象，直接解构取值
  udpateUsers: ({commit}, {userID, formData, config}) => {  
    http.put("/admin/update/"+userID, formData, config)
      .then((response)=>{
        // 这里不要提交formData，应该提交接口返回的最新用户数据
        commit("UPDATE_USERS", response.data);  
        console.log(response);
      })
      .catch((error)=>{
        console.log(error.response);
      })
  }
}

3. 可选：优化 mutation 逻辑

当前UPDATE_USERS逻辑是直接全量替换用户列表，若接口仅返回更新后的单个用户数据，需调整为匹配替换对应项：

mutations:{
  UPDATE_USERS: (state, updatedUser) => {
    const targetIndex = state.Users.findIndex(user => user.id === updatedUser.id)
    if (targetIndex > -1) {
      state.Users.splice(targetIndex, 1, updatedUser)
    }
  }
}

额外注意点

检查全局的拼写一致性：你把update拼写为udpate，如果存在调用/定义拼写不一致的情况，会额外触发找不到action的错误。

内容的提问来源于stack exchange，提问作者Oeng Kim Chhay