Vuex中dispatch传递表单数据至action时payload异常问题求助

你遇到的问题根源是Vuex Action函数的参数结构理解有误！

Vuex的Action方法第一个参数并不是你传递的payload，而是一个包含commit、dispatch、getters等属性的上下文（context）对象，你传入的表单数据作为第二个参数才是真正的payload。

看你当前的Action代码：

const actions = {
  async sendReport(payload) { // 这里的"payload"其实是Vuex的context对象
    console.log(payload) // 所以打印出来的是getters、commit这些，不是表单数据
    await axios
      .post("http://xxxxxxxxxx:8081/api/admin/bugreports/", payload)
      .catch((err) => {
        console.log(err);
      });
  },
};

修正后的Action代码 #

只需要调整参数顺序，把context作为第一个参数，payload作为第二个：

const actions = {
  async sendReport(context, payload) {
    console.log(payload); // 现在就能打印出正确的表单数据了
    await axios
      .post("http://xxxxxxxxxx:8081/api/admin/bugreports/", payload)
      .catch((err) => {
        console.log(err);
      });
  },
};

简化写法（可选） #

如果不需要用到context里的所有属性，还可以用对象解构来提取需要的属性（比如后续要提交mutation用到的commit），让代码更简洁：

const actions = {
  async sendReport({ commit }, payload) {
    console.log(payload);
    // 若后续需要提交mutation，可直接使用commit，比如 commit('SET_REPORT_STATUS', true)
    await axios
      .post("http://xxxxxxxxxx:8081/api/admin/bugreports/", payload)
      .catch((err) => {
        console.log(err);
      });
  },
};

为什么视图层打印payload没问题？因为你在store.dispatch里的写法是正确的——第二个参数确实是你要传递的表单数据，但Action里没正确接收参数，把上下文对象当成了payload，才导致日志不符合预期。

内容的提问来源于stack exchange，提问作者Jean-Luca