Vue.js 更新Vuex数组中的对象项

我试图管理一个简单的购物车的产品。产品作为一个名为

项的数组存储在状态中

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

如果一个产品已经添加到购物车中，并且有人试图再次添加它，我将尝试更新
数量
字段

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

这对我不起作用，因为它没有更新状态。有人知道诀窍吗
 这是反应性问题。您可以制作购物车的深度副本，使商店成为被动的：

   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
它的反应性问题。您可以制作购物车的深度副本，使商店成为被动的：

   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
使用
.find（…）
来更改对象的值，而不是使用
state.cart.map（…）
（使用
if（item.id==product.id）…
直接更改购物车？
state.cart.map
可能更好。然后您不需要执行
JSON.parse（JSON.stringify（））
使用
.find（..）
来更改对象的值，而不是使用
state.cart.map（..）
（使用
if（item.id==product.id）.
）来直接更改购物车？
state.cart.map
可能更好。然后您不需要执行
JSON.parse（JSON.stringify（））