Vuex getter не обновляется при изменении состояния

Question

Я не могу заставить получатель vuex обновляться при изменении объекта состояния.Я пытаюсь заставить получатель vuex вернуть общую сумму значений в объекте состояния с помощью функции Reduce.

// 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)

После установки пары ключ-значение платы за доставку в state.shippingFeesобъект, получатель все еще просто возвращает 0.

Answer 1

Vue не может обнаружить добавление или удаление свойства

Использование Vue.set(state.shippingFees, method.sellerId, method.fee)

Подробнее здесь

Answer 2

Vue не позволяет динамически добавлять новые реактивные свойства корневого уровня к уже созданному экземпляру. Однако можно добавить реактивные свойства к вложенному объекту, используя метод Vue.set (object, key, value)

Следовательно, способ обновления над объектом не является реактивным. Следовательно, ваши значения не обновляются в получателе. Чтобы узнать больше о реактивности vue, прочитайте здесь .

Чтобы сделать его реактивным, вам нужно использовать $ set или object.assign

Обновите вашу мутацию, как показано ниже =>

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