从catch块访问vuex存储

时间:2018-04-19 09:42:37

标签: vue.js axios vuex

我试图从api调用中输入错误消息并将其放入vuex存储中,但我不知道该怎么做。

我在vue文件中的“方法”中有这个

 axios
    .post("/api/model", this.model)
    .then(response => {
      window.location.href = "/Home/Index";
    })
    .catch(function(error) {
      if (error.response) {
        this.$store.commit("setServerErrors", error.response.data);
      }
    });

我收到以下错误: 未捕获(在承诺中)TypeError:无法读取未定义的属性'$ store'

2 个答案:

答案 0 :(得分:4)

您的功能可能正在重新分配this

的值

尝试将其更改为:

axios
    .post("/api/model", this.model)
    .then(response => {
      window.location.href = "/Home/Index";
    })
    .catch(error => {  // <= HERE IS THE CHANGE!!
      if (error.response) {
        this.$store.commit("setServerErrors", error.response.data);
      }
    });

在此处了解function(arg) {}(arg) => {}之间的区别:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

答案 1 :(得分:1)

您正在catch块上使用函数而不是箭头函数,因此该块内的this具有不同的范围。

只需用箭头功能替换该功能。

axios
    .post("/api/model", this.model)
    .then(response => {
      window.location.href = "/Home/Index";
    })
    .catch((error) => {
      if (error.response) {
        this.$store.commit("setServerErrors", error.response.data);
      }
    });