从 catch 块访问 vuex 存储

Posted

技术标签:

【中文标题】从 catch 块访问 vuex 存储【英文标题】:Access vuex store from catch block 【发布时间】:2018-09-29 18:18:52 【问题描述】:

我试图将来自 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);
      
    );

我收到以下错误: Uncaught (in promise) TypeError: Cannot read property '$store' of undefined

【问题讨论】:

将函数更改为箭头,您将失去this 范围 【参考方案1】:

可能您的函数正在重新分配 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) =&gt; 之间的区别:https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Functions/Arrow_functions

【讨论】:

【参考方案2】:

您在 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);
      
    );

【讨论】:

以上是关于从 catch 块访问 vuex 存储的主要内容,如果未能解决你的问题,请参考以下文章

vuex物理存储在哪里?

访问 js 文件中的 vuex 存储

无法在 Axios 拦截器中访问 Vuex 存储突变

Vuex/Vuejs:在 vuex 存储中访问 localStorage

我正在尝试从我的 vuex 存储中获取数据,但它给出了一个错误

无法将存储数据访问到 vuex 中的组件中