상태 변경 시 Vuex getter가 업데이트되지 않음

상태 변경 시 Vuex getter가 업데이트되지 않음

상태 개체가 변경될 때 vuex getter를 업데이트할 수 없습니다.vuex getter가 축소 함수를 사용하여 상태 객체의 총 값 합계를 반환하려고 합니다.

// Mutation
state.shippingFees[method.sellerId] = method.fee; // state.shippingFees = { 1: 1900 }; etc.

// Getter
totalShippingFees: state => Object.values(state.shippingFees).reduce((total, fee) => total + fee, 0)

배송비 키-값 쌍을 주에서 설정한 후.shippingFeees 객체는 getter가 0을 반환할 뿐입니다.

Vue에서는 이미 생성된 인스턴스에 새 루트 수준 사후 대응 속성을 동적으로 추가할 수 없습니다.그러나 Vue.set(개체, 키, 값) 메서드를 사용하여 네스트된 개체에 비활성 속성을 추가할 수 있습니다.

따라서 위의 개체를 업데이트하는 방법은 반응하지 않습니다.따라서 getter에서는 값이 갱신되지 않습니다.vue reactivity에 대한 자세한 내용은 여기를 참조하십시오.

사후 대응을 하려면 $set 또는 object.assign을 사용해야 합니다.

다음과 같이 돌연변이를 업데이트하십시오 =>

Vue.$set(state.shippingFees,method.sellerId,method.fee);

Vue가 속성 추가 또는 삭제를 감지할 수 없음

사용하다Vue.set(state.shippingFees, method.sellerId, method.fee)

자세한 내용은 이쪽

Vue의 공식 문서 경고를 참조하십시오.인덱스별로 배열 요소를 변경할 수 없습니다.방법 하기와 같이 반응도 함께 같은 달성할 있다.

state.shippingFees.splice(index, 1, val) 
//using the splice method, replace the element at index

아니면. 대신으로 사용할 수 있다.

Vue.set(state.shippingFees, index , val)

//You can also use the vm.$set instance method, which is an alias for the global Vue.set method
vm.$set(vm.items, indexOfItem, newValue)

당신이 직접 상품이 인덱스를 사용하여 업데이트하 뷰, 또는 배열 길이 속성을 수정한 변화를 감지하지 못할 수 있다.

언급URL:https://stackoverflow.com/questions/55180530/vuex-getter-not-updating-on-state-changes