手把手教你 vue3 写个简单的购物车DEMO

先上效果图：demo传送门

github 地址

代码：

export default defineComponent({
  name: "APP",
  setup(props, context) {
    const { shop_list, added: cartProducts } = state;

    let data = reactive({
      shop_list,
      cartProducts,
    });

    // 添加购物车
    const addToCart = (shop: ParamsProps) => {
      const { id } = shop;
      let record = data.cartProducts.find((n) => n.id == id);
      if (record && record.num) {
        record.num++;
      } else {
        data.cartProducts.push({
          ...shop,
          num: 1,
        });
      }
    };

    // 清空购物车
    const clearAllCart = () => {
      data.cartProducts = [];
    };

    // 删除指定商品
    const delProduct = ({ id }) => {
      data.cartProducts.forEach(({ id: sid }, i) => {
        if (id == sid) {
          data.cartProducts.splice(i, 1);
        }
      });
    };

    // 计算总价 和 总数量
    const totalPrice = computed(() => {
      let total = 0,
        amount = 0;
      data.cartProducts.forEach(({ price, num }) => {
        total += price * num;
      });
      return total;
    });

    // 计算总数量
    const totalNum = computed(() => {
      let total = 0;
      data.cartProducts.forEach(({ num }) => {
        total += num;
      });
      return total;
    });

    onMounted(() => {
      console.info("onMounted");
    });

    return {
      ...toRefs(data),
      totalNum,
      totalPrice,
      addToCart,
      clearAllCart,
      delProduct,
    };
  },
});```