Vue 3中向对象数组添加对象并保存Cookie时出现替换问题求助

问题场景 #

我在使用Vue3和Vuetify开发时，尝试将商品对象添加到购物车列表并保存到Cookie中，但每次添加新商品时，Cookie里的数组都会被替换成仅包含当前商品的新数组，无法实现追加效果。

模板代码：

<a to="#" data-toggle="tooltip" data-placement="top" title="Add to cart"
   @click.stop.prevent="handleAddToCart(product)">
  <v-icon class="icon-bag2">mdi-medical-bag</v-icon>
</a>

注：由于图标位于可点击div内，使用了stop.prevent修饰符阻止事件冒泡和默认行为。

原逻辑代码：

data() {
  return {
    productList: []
  }
},
methods: {
  handleAddToCart(product) {
    this.productList.push(product)
    console.log('product list', this.productList)
    this.$cookies.set('cart', JSON.stringify(this.productList))
  }
}

问题原因 #

核心问题是**productList初始化时未读取Cookie中已有的购物车数据**：每次页面刷新或组件初始化时，productList都会被重置为空数组，点击添加商品时只是在空数组中push当前商品，再将这个仅含单个商品的数组覆盖写入Cookie，导致之前的购物车数据丢失。

解决方案 #

修改productList的初始化逻辑，优先从Cookie读取已有数据，再执行追加操作：

data() {
  return {
    // 从Cookie读取已有购物车数据，无数据则初始化为空数组
    productList: JSON.parse(this.$cookies.get('cart') || '[]')
  }
},
methods: {
  handleAddToCart(product) {
    this.productList.push(product)
    console.log('product list', this.productList)
    this.$cookies.set('cart', JSON.stringify(this.productList))
  }
}

可选优化（避免重复添加） #

如果需要防止同一商品被重复加入购物车，可在添加前判断商品是否已存在（假设商品有唯一标识id）：

handleAddToCart(product) {
  const isExist = this.productList.some(item => item.id === product.id)
  if (!isExist) {
    this.productList.push(product)
    this.$cookies.set('cart', JSON.stringify(this.productList))
    console.log('product list', this.productList)
  } else {
    console.log('该商品已在购物车中')
  }
}

内容的提问来源于stack exchange，提问作者Nina