状态综合运用

实验题目

仓库设计

实验目的

掌握状态管理|仓库 Pinia 的基本使用

熟悉开发者工具 Vue Devtools 的基本使用

进一步熟悉路由的基本使用

实验内容

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

商品仓库 goods.js

. 所有商品 goods

. 单个商品 good

. 获取所有商品 getAll()

. 根据 id 获取商品 getById()

. 分页获取商品* getByPage()

. 其它业务*

购物车仓库 cart.js

. 购物车数据 lists

. 获取购物车数据 getLists()

. 添加到购物车 addToLists()

. 清空购物车 clearLists()

. 从购物车中删除* removeFromLists()

. 其它业务*

主题切换/换肤* theme.js

汉堡菜单* ham.js

地图仓库* map.js

订单仓库* order.js

参考效果和参考代码

略

拓展与思考

库存调整：商品数量变化的同时，相应的调整库存

加载指示：加载仓库数据时，给出加载提示，如：数据加载中...

使用 supabase 中数据库/表格改进并优化数据的管理

保存/推送项目到自己的代码仓库