Vue에서 로드/오류 상태를 저장할 위치입니다.JS/Vuex?

Vue에서 로드/오류 상태를 저장할 위치입니다.JS/Vuex?

React와 함께 일한 적이 있는 Vue.js를 현재 배우고 있습니다.지금까지 모든 것이 잘 되어가고 있지만, 코드 디자인 문제에 부딪혀 구글에서 정확한 답을 찾을 수 없습니다.

학습 프로젝트로서 해커 뉴스 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;
    });
}

다른 솔루션은 다음과 같이 Vuex에 관리를 맡기는 것입니다.

// 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", error: NULL}또는{result: NULL, error: "E.G.: 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'));
    })
},

• 그showErrorAlert경고로 사용자에게 알립니다.

예를 들어, 새로운 클래스를 저장할 때 시스템은 동일하며, 다음과 같은 경우 성공 알림을 보냅니다.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메서드는 사용자가 정상적으로 로드된 경우에만 실행됩니다.

언급URL : https://stackoverflow.com/questions/51960477/where-to-store-the-loading-error-state-with-vue-js-vuex