状态综合运用

仓库设计

改写前续产品列表页 Goods.vue 和 产品详情页 Details.vue，使用仓库完成数据的处理

. 所有商品 goods

. 单个商品 good

. 获取所有商品 getGoods()

. 根据 id 获取商品 getGoodById()

. 分页获取商品* getGoodsByPage()

. 其它业务*

. 购物车数据 cart

. 获取购物车数据 getCart()

. 添加到购物车 addToCart()

. 从购物车中删除 removeFromCart()

. 清空购物车 clearCart()

. 其它业务*

import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const useGoodsStore = defineStore("goods", () => {
  const goods = ref([]);
  const good = ref({});
  const getGoods = async () => {
  };
  const getGoodById = async (id) => {
  };

  return { goods, good, getGoods, getGoodById };
});

import { ref } from "vue";
import { defineStore } from "pinia";

export const useCartStore = defineStore("cart", () => {
  const cart = ref([]);

  const addToCart = (product) => {
    // 直接添加到购物车，增加数量字段，默认为1
    // const existingItem = cart.value.find((item) => item.id === product.id);
    // if (existingItem) {
    //   existingItem.quantity++;
    //   console.log("++");
    // } else {
    //   cart.value.push({ ...product, quantity: 1 });
    //   console.log("1");
    // }

    // 从详情页添加到购物车，数据已经进行了预处理，数量默认为1
    const res = cart.value.filter((item) => item.id === product.id)[0];
    if (res) {
      res.quantity += product.quantity;
    } else {
      cart.value.push({ ...product });
    }
  };

  const removeFromCart = (id) => {
    cart.value = cart.value.filter((item) => item.id !== id);
  };

  const getCart = async () => {
    let response = await fetch("../data/cart.json");
    let data = await response.json();
    cart.value = data;
  };

  const clearCart = () => {
    cart.value = [];
  };

  return {
    cart,
    addToCart,
    removeFromCart,
    getCart,
    clearCart,
  };
});

. 引入并使用购物车仓库，控制购物车的显示与隐藏

. 引入并使用商品仓库 - 获取所有商品

. 引入并使用商品仓库 - 根据 id 获取商品

. 引入并使用购物车仓库 - 添加到购物车

. 引入并使用购物车仓库 - 获取购物车数据

现场验收、课后提交实验报告