Vuex 모델 업데이트가 계산된 속성을 다시 로드하지 않음

Vuex 모델 업데이트가 계산된 속성을 다시 로드하지 않음

다음 컴포넌트를 사용하여 배송/픽업 경로의 스톱과 픽업 및 드롭되는 아이템의 수를 신속하게 설정합니다.

그리고 이것은 데이터 모델입니다. 앞의 이미지에서 2는 'a' 옆에 있는 모델입니다.

a가 + 또는 - 버튼을 클릭하면 첫 번째 항목에서는 예상대로 동작합니다.

그러나 두 번째 아이템은 예상대로 작동하지 않는다.

이미 오브젝트 속성 업데이트에 대한 몇 가지 게시물을 확인했습니다.

전체 계층에 이벤트 체인을 두지 않고 vue.js의 임의로 중첩된 하위 구성 요소에서 속성을 변환할 수 있습니까?

https://forum.vuejs.org/t/nested-props-mutations-hell-internet-need-clarification/99346 https://forum.vuejs.org/t/is-mutating-object-props-bad-practice/17448

이 코드를 생각해 냈습니다.

ADD_ITEM_TO_SELECTED_STOP(state, payload) {
      let count = state.selectedStop.categories[payload.catIndex].items[payload.itemIndex].count;
      const selectedCat = state.selectedStop.categories[payload.catIndex];
      const currentItem = selectedCat.items[payload.itemIndex];
      currentItem.count = count + 1;
      selectedCat.items[payload.itemIndex] = currentItem;
      Vue.set(state.selectedStop.categories, payload.catIndex, selectedCat);
    },

버튼 이벤트로 다음과 같이 입력합니다.

addToItem(item) {
      this.$store.dispatch("addItemToSelectedStop", {
        catIndex: item.catIndex,
        itemIndex: item.itemIndex
      })
    },

그리고 마지막으로 내 자산 코드 계산:

items() {
      let finalArray = [];
      this.selectedStop.categories.forEach(
        (cat, catIndex) => {
          let selected = cat.items.filter((item) => item.count > 0 );
          if (selected.length > 0) {
            //here we add the catIndex and itemIndex to have it calling the rigth shit
            selected = selected.map(val => {
              let itemIndex = cat.items.findIndex( itemToFind => itemToFind.id === val.id);
              return {
                ...val,
                catIndex: catIndex,
                itemIndex: itemIndex,

              }})
            finalArray = finalArray.concat(selected);
          }
        });
      return finalArray;
    }

가장 혼란스러운 것은 다른 컴포넌트에 거의 같은 코드가 있고, 예상대로 동작하고 있다는 것입니다.모델이 변경되어도 계산된 속성은 첫 번째 항목에서만 재계산됩니다.

이 요지를 읽고 이러한 문제를 설명하는 게시물을 다시 한 번 살펴본 후 속성뿐만 아니라 저장된 객체 전체를 복사하여 업데이트하고 Vue.set을 사용하여 vuex에 다시 설정하기로 했습니다.이것이 저의 최종 스토어 방법입니다.

ADD_ITEM_TO_SELECTED_STOP(state, payload) {
      let selectedLocalStop = JSON.parse(JSON.stringify(state.selectedStop));
      let count = selectedLocalStop.categories[payload.catIndex].items[payload.itemIndex].count;
      selectedLocalStop.categories[payload.catIndex].items[payload.itemIndex].count = count + 1;
      Vue.set(state,"selectedStop", selectedLocalStop );
      //Now we search for this step on the main list
      const stepIndex = state.stops.findIndex(val => val.id === selectedLocalStop.id);
      Vue.set(state.stops,stepIndex, selectedLocalStop );
    },

원래 선택한 항목이 변경되었을 때 어레이 항목이 업데이트되었기 때문에 개체 전체를 업데이트한 후 마지막 비트를 추가해야 했습니다. 그러나 개체 생성과 함께 해당 관계는 더 이상 "자동"으로 작동하지 않으므로 수동으로 어레이를 업데이트해야 합니다.

언급URL : https://stackoverflow.com/questions/70795204/vuex-model-update-wont-reload-computed-property