为什么 dispatch 会提交错误的 payload？

Question

我想通过调度函数将我的表单数据传递到我的操作函数，并从那里用 axios 发送请求。但是在操作函数中，控制台、getters、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>

Answer 1

第一个参数不是有效负载，它是一个在商店实例上公开同一组 methods/properties 的上下文，第二个参数是您的有效负载

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 操作的信息

为什么 dispatch 会提交错误的 payload？

Why does dispatch submit a wrong payload?

javascript

forms

vue.js

axios

submit