时间戳

首页 > 解决方案 > 将 axios 响应错误存储在 axios store 中并在组件内处理它是一种好习惯吗？

javascript - 将 axios 响应错误存储在 axios store 中并在组件内处理它是一种好习惯吗？

问题描述

我计划通过 axios 通过 vuex 执行所有服务器 CRUDing 传输。喜欢：

actions: { // dispatch
    createCategory(ctx) {
        return axios.post(process.env.API_URL + "category/create/", category)
            .then(response => {
                ctx.commit('UPDATE_CATEGORY', response.data.updated_category);
                return response;
            }).catch(error => {
                return error;
            })
...

然后在组件中调用它们

this.$store.dispatch("createCategory", category)
    .then(response => { DO NOTIFICATION STUFF }  
    .catch(error => { this.errors = error }

（我可能需要 axios 中的 promise 和 reject() 来捕获错误，但这不是重点）

我的问题是我应该在本地以这种方式（组件）处理错误，还是应该使用 vuex 状态在全局范围内处理它

actions: { // dispatch
    createCategory(ctx) {
        return axios.post(process.env.API_URL + "category/create/", category)
            .then(response => {
                ctx.commit('UPDATE_CATEGORY', response.data.updated_category);
                return response;
            }).catch(error => {
                ctx.commit('SET_ERROR', error)
            })
...

并调用组件中的错误，例如：this.$store.getters['getErrors']？

（这里的例子有点抽象，只是为了解释）

那么哪种方式更好的做法是在组件内本地或在 vuex 存储中全局处理错误？

标签： javascriptvue.jsaxiosvuex

解决方案

除非您打算与多个不同的组件共享错误状态，否则我将在组件内本地处理错误。

如果不需要，我通常会避免使用 Vuex，因为它会增加很多开销。我使用 Vuex 的经验法则是：

  • 仅当状态将被多个不相关的组件访问时才使用 Vuex
  • 仅当状态由不是相关父组件的直接子组件的组件访问时才使用 Vuex

查看这个“我应该将这些数据存储在 Vuex 中吗”决策树

其他要考虑的事情是您使用什么Vuex，它是组件状态管理还是数据状态管理。

如果将 Vuex 视为数据状态管理（特定数据的状态并且可以访问任何组件），那么在组件内本地处理错误更有意义。

如果您将 Vuex 视为组件状态管理（特定组件/页面的状态并且不会被其他组件访问），那么全局/在商店中处理它是有意义的，因为所有状态都特定于该特定组件，但我个人仍然会在本地处理它，除非我需要将状态共享给非直接子组件。我经常看到这被应用在一些 vue 应用程序上

除此之外，如果我在本地处理错误，我还更喜欢如何编写代码：

try {
    store.doSomething();
catch (err) {
    console.log("Failed to execute doSomething()");
}

这看起来比：

store.doSomething();

if (store.err) {
    console.log("Failed to execute doSomething()");
}

推荐阅读