如何在Vuex store中使用axios.patch()提交数据完成API更新

核心错误点 #

• Vuex action的第一个参数固定为context上下文对象，你直接定义updateUsers(id)会把context对象赋值给id变量，永远无法拿到外部传入的正确参数，第二个参数才是dispatch传递的自定义参数
• 调用$store.dispatch触发updateUsers action时，没有传递必填的用户id及更新数据参数，无有效参数传入接口
• axios.patch方法的第二个参数需要传入要更新的用户数据对象，你当前传入id不符合接口参数规范，服务端无法识别更新内容
• 额外优化点：async/await和.then回调不需要混用，统一语法风格后更易维护，建议补充错误捕获逻辑方便排查报错

修复后代码 #

1. store中的action代码

async updateUsers(_, { id, updateData }) {
  // 第一个参数为context上下文，未使用可以用_占位，第二个参数接收外部传入的自定义数据
  try {
    const response = await axios.patch(`${resource_url}${id}`, updateData)
    console.log(response.data)
    // 如需同步更新store内的用户数据，这里调用commit提交对应mutation即可
  } catch (err) {
    console.error('更新用户失败报错：', err)
  }
}

2. 触发action的点击事件方法代码

methods: {
  async renameUsers(){
    // 替换为你业务中实际的用户id和需要更新的字段数据
    const targetUserId = 1001 // 示例值，替换为你的实际用户id变量
    const userUpdateData = {
      name: "修改后的用户名" // 替换为你实际要更新的字段
    }
    await this.$store.dispatch('updateUsers', {
      id: targetUserId,
      updateData: userUpdateData
    })
  }
}

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