Vue公司版购物车开发思路教程

Vue公司版购物车开发思路教程

程序思维

18-04-30 13:20
Vue公司是现在最流行的前端框架，电商是最热门的行业，购物车是电商的核心功能，那么如何开发一个扩展性强，易维护的购物车组件呢？下面就给大家介绍一下用Vue公司开发购物车的思路吧。

1，进入商品详情页面选择商品规格

选择颜色或尺码，输入购买数量，点击确定进入购物车。放入购物车的字段如下：商品的ID：GID商品名称：标题商品图片：IMG商品数量：量商品运费：运费商品价格：价格是否选中：选中（值true和false）商品属性（规格）：[{ “attrid”： “1034”， “标题”： “颜色”， “参数”：[{ “芳族聚酰胺”： “1189”， “标题”： “蓝色”}]}，{ “attrid”：” 1037" ， “标题”： “尺码”， “参数”：[{ “芳族聚酰胺”： “1192”， “标题”： “37”}]}]2，vuex和localStorage的的作用Vuex的作用：将购物车的数据存储到vuex中实现组件传值和双向绑定。localStorage的的作用：解决vuex刷新页面数据丢失的问题，将vuex中的数据缓存起来。

如上面两张图所示购物车里还没有商品。3，购物车组件页面源码车/ index.vue

<！ - 模板 - >

<模板>

<subHeader：navTitle = navTitle> </ subHeader>

cartData“class =”item-list“>中的<div v-for =”（item，index）

<label：class =“{‘check-mark’：true，‘active’：item.checked}”@ click =“selectCart（’’+ item.gid +’’）”> </ label>

</ DIV>

{{item.title}}

{{item.price}}

</ DIV>

</ DIV>

</ DIV>

</ DIV>

</ DIV>

<label @ click =“allSelectCart（）”>

<div：class =“{‘check-mark’：true，‘active’：bAllChecked}”> </ div>

全选

</标签>

</ DIV>

合计： {{priceTotal}}

</ DIV>

<button type =“button”@ click =“goOrder（）”：class =“{‘sett-right’：true，‘disable’：！bAllChecked}”>去结算</ button>

</ DIV>

</ DIV>

</ DIV>

</模板>

<！ - 行为 - >

<！ - 样式 - >