Javascript 在何处存储Vue.JS/Vuex的加载/错误状态？

我目前正在学习Vue.js，之前曾与React合作过。到目前为止一切进展顺利，但我遇到了一个代码设计问题，在谷歌上找不到确切的答案

作为一个学习项目，我正在为黑客新闻API开发一个前端。为了管理我的状态，我使用Vuex

这就是我的组件的外观：

// Component.vue
<template lang="pug">
div(v-if="item.loading")
  span.story-loading Loading story...

div(v-else-if="item.error")
  span.story-error Something went wrong while fetching this story.

div(v-else)
  a.story-link(:href="item.url") {{item.title}}
  span.story-metadata
    | {{item.score}} points by {{item.by}} | {{item.descendants}} comments
</template>

另一种解决方案是让Vuex管理它，如下所示：

// store.js
mutations: {
  createItem(state, data) {
    state.items = { ...state.items, [data.id]: data };
  }
},
actions: {
  getItem({ commit }, id) {
    return fetchItem(id).then(data => commit("createItem", data));
  }
}

// Component.vue
data() {
  return {
    loading: false,
    error: false
  };
},
created() {
  this.loading = true;
  this.getItem(this.id)
    .then(() => {
      this.loading = false;
    })
    .catch(() => {
      this.loading = false;
      this.error = true;
    });
}

// store.js
mutations: {
  fetchItemPending(state, id) {
    state.items = { ...state.items, [id]: { loading: true } };
  },
  fetchItemComplete(state, id) {
    state.items = { ...state.items, [id]: { loading: false } };
  },
  createItem(state, data) {
    state.items = { ...state.items, [data.id]: data };
  },
  erroredItem(state, id) {
    state.items = { ...state.items, [id]: { error: true } };
  }
},
actions: {
  getItem({ commit }, id) {
    commit("fetchItemPending", id);
    fetchItem(id)
      .then(data => {
        commit("fetchItemComplete", id);
        commit("createItem", data);
      })
      .catch(() => {
        commit("fetchItemComplete", id);
        commit("erroredItem", id);
      });
  }
}

// Component.vue (note how we don't manage anything related to the loading or errors anymore)
created() {
  this.getItem(this.id);
}

我喜欢第一种解决方案样式，但我觉得组件不必处理状态

第二种解决方案允许Vuex处理所有状态。但所有这些仅用于管理加载和错误状态的突变都让人感到奇怪

哪一个最接近Vue.js/Vuex理念？或者我应该完全不同地去做

---

TL；DR：我应该在哪里管理我的加载和错误状态？

我不是专家，但我共享我的错误状态处理系统

我的一个存储操作方法如下所示：

  actions: {
      loadClasses ({ commit }) {
        console.debug("actions loadClasses; is called!");
        return rootActions.getter('/api/m/class/getall')
          .then(r => {
            if(r && r.result) {
              let classes = r.result;
              commit('SET_CLASSES', classes);
            } else {
              console.error("actions loadClasses; error occours during loading the classes! Error: " + JSON.stringify(r.error));
            }
            return r;
          })
          .catch(error => {
            console.error("actions loadClasses; error occours during loading the classes! Error: " + error);
            throw error;
          });
      },

• rootActions是一个axios
• 我的rest api响应如下：

  {result:
  “asdasdasd”，错误：NULL}

  或

  {结果：NULL，错误：“例如：servererror”}

这有什么好处

在组件中，我可以得到结果或错误：

loadClasses: function() {
  console.debug("classmanager-container loading classes..");
  return this.$store.dispatch('classes/loadClasses')
    .then(r => {
      if(r && r.result) {
        this.classes = this.$store.getters['classes/classesNameId'];
      } else {
        this.showErrorAlert(this.$i18n.t('basic.loaderror'));
      }
    })
    .catch(e => {
      this.showErrorAlert(this.$i18n.t('basic.loaderror'));
    })
},

• 报警功能将通过报警通知用户

例如，当我保存一个新类时，系统是相同的，如果

r.result

不为空，我会发出成功警报：

+1好处：您可以“强制”异步ajax调用进入顺序。例如：

loadUsers: function() {
  console.debug("classmanager-container loading users..");
  return this.$store.dispatch('users/loadsers')
    .then(r => {
      if(r && r.result) {
        this.users = this.$store.getters['users/usersNameId'];
        return this.loadClasses();
      } else {
        this.showErrorAlert(this.$i18n.t('basic.loaderror'));
      }
    })
    .catch(e => {
      this.showErrorAlert(this.$i18n.t('basic.loaderror'));
    })
},

这样，只有当用户加载良好时，

loadClasses

方法才会运行