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

更新Vuex数组中的对象项

1 个答案: