programing

getter가 업데이트되지 않는 것을 수신하는 Vuex 계산 속성

bestcode 2022. 7. 16. 15:10
반응형

getter가 업데이트되지 않는 것을 수신하는 Vuex 계산 속성

스토어가 변경되었을 때 계산된 속성(기본적으로 ID로 스토어 getter를 호출하는 것)이 재계산되지 않는 문제가 있습니다.왜 그런지 아는 사람?

계산된 제품(isInCart는 관계형 제품이고, 다른 하나는 상태 변경이 기능함을 보여줍니다)

isInCart() {
    var isInCart = this.$store.getters['shoppingCart/isInCart'](this.product.id);
    return isInCart;
  }

Vuex 스토어

const getters = {
  count: state => state.items.length,
  hasItems: state => !!state.items.length,
  isInCart(state) {
    return id => state.items.findIndex((item) => {
      return item.productId === id; 
    }) > -1;
  }
}

상태변화는 다음과 같은 돌연변이에 의해 이루어집니다.

setCart(state, cart) {
    state.items = cart.items;
  },

getter에 대한 첫 번째 콜은 예상대로 동작합니다.다만 상태가 바뀌면 다시 실행되지 않을 뿐입니다.다른 getter "hasItem" 및 "count"는 예상대로 작동합니다.


또한 다음과 같이 함수를 직접 계산으로 넣으려고 컴포함수는 다음과 같습니다.

computed: {
     ...mapState({
        isInCart(state) {
          var id = this.product.id;
          return !!state.shoppingCart.items.filter(item => item.productId === id).length
        }
      })
    },

이는 getter가 함수를 반환하기 때문입니다.게터가 의존하는 각 상태는 옵서버입니다.이러한 의존성의 변화를 관찰합니다.변경 시 getter가 실행될 수 있습니다.그러나 getter가 함수를 반환하기만 하면 이 함수의 결과를 얻을 수 없습니다.대신 업데이트된 값을 가진 함수의 결과가 표시됩니다.

언급URL : https://stackoverflow.com/questions/50926855/vuex-computed-property-that-listens-to-getter-not-updating

반응형