为什么 dispatch 会提交错误的有效载荷？答案

【问题标题】：Why does dispatch submit a wrong payload?为什么 dispatch 会提交错误的有效载荷？
【发布时间】：2021-10-12 21:04:23
【问题描述】：

我想通过 dispatch 函数将表单的数据传递给我的 action 函数，并使用 axios 从那里发送请求。但是在操作函数中，控制台中记录了一些完全不同的东西，getter，commit，...

感谢您的帮助。

动作负载： Screenshot 1

商店操作：

const actions = {
  async sendReport(payload) {
    console.log(payload)
    await axios
      .post("http://xxxxxxxxxx:8081/api/admin/bugreports/", payload)
      .catch((err) => {
        console.log(err);
      });
  },
};

查看功能：

 function report() {
      store.dispatch("company_report/sendReport", {
        text: state.report,
        user: state.user_info.id,
      });
    }

我认为有效负载将正确的值记录为有效负载。

表格：

<form @submit.prevent="report()">
      <input v-model="state.report" name="report" id="report" class="input" />
      <button type="submit" class="second-btn btn">Absenden</button>
</form>

【问题讨论】：

标签： javascript forms vue.js axios submit

【解决方案1】：

第一个参数不是实际的有效负载，它是一个在商店实例上公开相同方法/属性集的上下文，第二个参数是您的有效负载

const actions = {
  async sendReport(context,payload) {
    console.log(payload)
    await axios
      .post("http://xxxxxxxxxx:8081/api/admin/bugreports/", payload)
      .catch((err) => {
        console.log(err);
      });
  },
};

您可以从here阅读更多关于 vuex 操作的信息

【讨论】：

非常感谢，这是我在 vue 中的第一个项目。