programing

Vuex Getter가 업데이트되지 않음

prostudy 2022. 5. 2. 20:33
반응형

Vuex Getter가 업데이트되지 않음

아래 게이터가 있다.

    withEarmarks: state => {
        var count = 0;
        for (let l of state.laptops) {
            if (l.earmarks.length > 0) {
                count++;
            }
        }
      return count;
    }

구성 요소에서 이 계산된 속성은 다음과 같다.

        withEarmarks() { return this.$store.getters.withEarmarks; },

반환되는 값은 랩톱 어레이에서 요소를 변경하고 게터가 업데이트되지 않을 때까지 정확하다.

당신의 경우state.laptops.earmarks배열이며, 배열 색인으로 조작하는 경우state.laptops[index]. Vue는 상태 배열의 돌연변이에 (색인별로) 반응할 수 없음.이 문서에서는 다음과 같은 2가지 해결 방법을 제공한다.

// 1. use purpose built vue method:
Vue.set(state.laptops, index, laptop)
  
// 2. splice the value in at an index:
state.laptops.splice(index, 1, laptop)

비록 문서화 되긴 했지만,페이지에 "이걸 모르면시간의 생산성을 낭비하게 될 거야"라고 쓰여 있는 거대한 네온사인이 좋은 추가가 될 거라고 생각해.

https://vuejs.org/v2/guide/list.html#Caveats에서 이 "contat"에 대해 자세히 알아보십시오.

리액티비티 이슈와 부에 주의사항 외에 또 다른 이유가 있을 수 있다, 현지 변수를 소개해 주셨는데요.counter계산된 함수에서, 당신은 다음을 사용해 볼 수 있다.reduce주어진 대로 기능하다

withEarmarks: state => {
    return state.laptops.reduce((acc, item) => {
        if(item.earmarks.length > 0){
            acc++;
        }
        return acc;
    }, 0);
}

이 대답 외에 @jpschroeder의 대답을 고려한다.

참조URL: https://stackoverflow.com/questions/40860592/vuex-getter-not-updating

반응형