JavaScript — не мутировать Vuex вне обработчика мутаций. Как реактивно обновить массив?

Не изменяйте Vuex вне обработчика мутаций. Как реактивно обновить массив?

Моя цель — реактивное изменение объекта массива, я хочу, чтобы он обновлялся всякий раз, когда я вызываю это действие для моего компонента.

Index.vue

 {amp}lt;select @change="onChange($event, product)"{amp}gt; {amp}lt;option{amp}gt;{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 
 onChange(event, product) { let qty = event.target.value // Assuming product is an object { _id: 23, quantity: 23 } this.$store.commit("changeQuantity", {product, qty}) } 

магазин / index.js

 export const state = () ={amp}gt; ({ cart: [ {"_id": 1, "quantity": 2}, {"_id": 12, "quantity": 4}, {"_id": 9, "quantity": 99}, {"_id": 3, "quantity": 14} ] }); export const mutations = { changeQuantity(state, { product, qty }) { // Find a targeted product in the cart let cartProduct = state.cart.find(item ={amp}gt; item._id === product._id); // Find the Index let indexOfProduct = state.cart.indexOf(cartProduct); // Change the quantity cartProduct.quantity = qty; // Create a new copy and assign it to the same variable cartProduct = Object.assign({}, cartProduct); // Removed and update with a new object, Reason why I use splice is because // of the reactivity state.cart.splice(indexOfProduct, 1, cartProduct); }, } 

Первый раз в порядке, но второй раз показывает ошибку

[vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций.

Каков отраслевой стандарт для изменения массива и его немедленного обновления?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector