vue系列教程之微商城项目|购物车页面

问题描述

vant-ui提供了现成的商品卡片，可以用于购物车页面

解决方案

1.引入顶部导航栏

1.引入商品卡片组件

main.js中追加

2.页面使用并查看效果

views/gwc.vue

ps:直接遍历$store.getters.getAllGoods即可拿到购物车中的数据

如果页面为空，需要先加入商品到购物车，再回到购物车页面

计算总价

1.引入底部的价格栏，vant-ui提供了现成的组件.该组件自动定位到页面底部，会覆盖底部导航栏，这个页面不显示导航栏正好。但为了防止未知情况发生，还是建议在app.vue中设置'/gwc'路由下隐藏导航栏。在商品详情页一章中讲解了如何动态形式导航栏

2.在购物车页面内通过computed计算属性，计算$store中存放的所有商品的总价 gwc.vue

3.查看效果

删除功能

1.在vuex的mutations中添加删除函数，需要知道商品在全局变量数组中的下标 store/index.js

2.在购物车页面的删除函数中触发

扩展知识

每次打开网页或者刷新网页，vuex中的数据都会清空，在这里意味着购物车会被清空。如果希望网页刷新或者重启购物车里的商品都保持之前的状态，可以使用webstorage来完成。很简单，自行百度webstorage。

结语

完整代码

store/index.js

gwc.vue

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）