如何根据vue中的库存将产品添加到购物车中

<template>
  <div>
    <h2>产品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
        <button @click="addToCart(product)">添加到购物车</button>
      </li>
    </ul>

    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }} - {{ item.quantity }}
        <button @click="decreaseQuantity(item)">-</button>
        <button @click="increaseQuantity(item)">+</button>
      </li>
    </ul>

    <p>总数量: {{ totalQuantity }}</p>
    <p>总价格: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '产品1', price: 10, stock: 5 },
        { id: 2, name: '产品2', price: 20, stock: 3 },
        { id: 3, name: '产品3', price: 30, stock: 8 },
      ],
      cart: [],
    };
  },
  computed: {
    totalQuantity() {
      return this.cart.reduce((total, item) => total + item.quantity, 0);
    },
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
  methods: {
    addToCart(product) {
      if (product.stock > 0) {
        const existingItem = this.cart.find(item => item.id === product.id);
        if (existingItem) {
          existingItem.quantity++;
        } else {
          this.cart.push({ ...product, quantity: 1 });
        }
        product.stock--;
      } else {
        alert('库存不足！');
      }
    },
    increaseQuantity(item) {
      item.quantity++;
      item.stock--;
    },
    decreaseQuantity(item) {
      if (item.quantity > 1) {
        item.quantity--;
        item.stock++;
      }
    },
  },
};
</script>