Обновление объекта в массиве Vuex

Question

Я пытаюсь управлять простой корзиной продуктов. Продукты хранятся в состоянии как массив под названием items

export const state = () => ({
  cart: {
    items: [],
  }
})

Если товар уже добавлен в корзину, и кто-то пытается добавить его снова, я пытаюсь обновить поле quantity

addItem(state, product) {
  let cartProduct = state.cart.items.find((item, index) => {
    return item.id === product.id
  })
  cartProduct.quantity++;
});

Это не работает для меня, так как не обновляет состояние. Кто-нибудь знает хитрость?

Answer 1

Это проблема реактивности. Вы можете сделать глубокую копию корзины, чтобы сделать магазин реагирующим:

   addItem(state, product) {
      let cartProduct = state.cart.items.find((item, index) => {
        return item.id === product.id
      })
      cartProduct.quantity++;
      state.cart = JSON.parse(JSON.stringify(state.cart))
    });

Другая опция использует Vue.set