vue3实现购物车功能

要实现购物车功能，需要以下几个步骤：

1. 创建一个购物车组件，可以使用Vue3中的Composition API来实现。

2. 创建一个商品列表组件，用来展示可选的商品列表，并且给每个商品添加一个“加入购物车”按钮。

3. 在购物车组件中创建一个空的数组，用来存储用户已经选择的商品。

4. 在商品列表组件中，给“加入购物车”按钮添加一个点击事件。点击按钮时，将商品信息添加到购物车数组中。

5. 在购物车组件中，使用v-for指令来循环展示已选择的商品列表，并且展示商品的名称、价格、数量等信息。

6. 在购物车组件中，计算已选择商品的总价，并且展示在页面上。

下面是一个简单的示例代码：

<!-- 商品列表组件 -->
<template>
  <div>
    <div v-for="product in products" :key="product.id">
      <div>{{ product.name }}</div>
      <div>{{ product.price }}</div>
      <button @click="addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const products = ref([
      { id: 1, name: '商品1', price: 100 },
      { id: 2, name: '商品2', price: 200 },
      { id: 3, name: '商品3', price: 300 },
    ]);

    const addToCart = (product) => {
      // 在这里添加商品到购物车数组中
    };

    return {
      products,
      addToCart,
    };
  },
};
</script>

<!-- 购物车组件 -->
<template>
  <div>
    <div v-for="item in cart" :key="item.id">
      <div>{{ item.name }}</div>
      <div>{{ item.price }}</div>
      <div>{{ item.quantity }}</div>
    </div>
    <div>总价：{{ totalPrice }}</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const cart = ref([]);

    const totalPrice = computed(() => {
      // 在这里计算购物车中已选择商品的总价
    });

    return {
      cart,
      totalPrice,
    };
  },
};
</script>