반응형
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
반응형
'programing' 카테고리의 다른 글
휴지 상태 - 소유 엔티티 인스턴스에서 캐스케이드="all-delete-module" 컬렉션을 더 이상 참조하지 않습니다. (0) | 2022.07.16 |
---|---|
커스텀 dev/prod 서버에서 vue cli 서비스 기능을 활용하는 방법 (0) | 2022.07.16 |
C에서 가변 함수의 호출을 전송합니다. (0) | 2022.07.16 |
C에서 글로벌 변수를 사용하는 것은 언제가 좋습니까? (0) | 2022.07.16 |
Java 앱에서 Windows 서비스를 만드는 방법 (0) | 2022.07.16 |