Vuex 레이스 조건

Vuex 레이스 조건

초심자가 Vuex에게 질문합니다.아마 뭔가 잘못하고 있을 거야.심플한 가게가 있습니다.

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    items: []
  },
  getters: Object.assign({}, itemGetters),
  mutations: Object.assign({}, itemMutations),
  actions: Object.assign({}, itemActions),
});

게터들은 이렇게 되어 있습니다.

export const itemGetters = {
  allItems: state => state.items,
  itemById: (state, getters) => id => getters.allItems.filter(s => s.id === id)[0],
};

이 뷰에는 중첩된 뷰가 있습니다.기본적으로 각 항목에 대한 정보 모달입니다.

링크를 클릭하면 항목이 채워진 요소 모달로 이동합니다.

export default {
  name: 'Landing',
  computed: {
    items() {
      return this.$store.getters.allItems;
    }
  },
  created() {
    if (this.items.length === 0) {
      this.$store.dispatch('allItems');
    }
  }
};

이제 해당 보기를 입력하면 예상대로 작동합니다. 중첩된 보기를 클릭하면 다음과 같이 표시됩니다.

<template>
  <div class="text">
    <h1 class="heading">{{ item.title }}</h1>
  </div>
</template>
<script>
export default {
  name: 'InfoModal',
  props: ['id'],
  computed: {
    item() {
      return this.$store.getters.itemById(this.id);
    }
  }
};
</script>

그것도 효과가 있어요.다만, 페이지를 새로고침만 하면 동작하지 않고, 다음의 이유로 에러가 발생합니다.item아직 도착하지 않았어요.

API에서 아이템을 가져오는 액션을 추가할 수도 있는데, API가 아직 없다면 포인트는 잘 모르겠습니다.결국 모든 아이템을 갖게 될 것이기 때문입니다.

여기서 뭘 해야 하죠?

계산한 속성은 컴포넌트의 라이프 사이클 초기에 평가됩니다.

아이템이 최종적으로 (그리고 빠르게) 표시되는 것을 알고 있는 경우는, 아이템이 아직 존재하지 않는 경우에 계산의 디폴트치를 되돌리기만 하면, Vue는 다음의 첫 번째 실행에서 렌더링할 것이 있습니다(빈 것이라도).

  computed: {
    item() {
      return this.$store.getters.itemById(this.id) || {}; // added {} as default.
    }
  }

아이템이 사용 가능하게 되는 즉시 계산은 자동으로 재평가됩니다(게터가 사용 가능하기 때문입니다).

언급URL : https://stackoverflow.com/questions/50065013/vuex-race-condition