这篇文章主要为大家详细介绍了vuex实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下
页面布局：
采用了element-ui的表格对商品列表和购物车列表进行布局
1、商品列表
<div class="shop-list"> <table> <i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.id }}</span> <p>{{ scope.row.name }}</p><div class="name-wrapper"> {{ scope.row.name }}</div> <p>{{ scope.row.price }}</p><div class="name-wrapper"> {{ scope.row.price }}</div> 添加</table></div>
shopList数据：
//模拟商品列表数据 shop_list: [{ id: 11, name: '鱼香肉丝', price: 12, }, { id: 22, name: '<div style="color:transparent">本文来源gaodai.ma#com搞##代!^码@网*</div>宫保鸡丁', price: 14 }, { id: 34, name: '土豆丝', price: 10 }, { id: 47, name: '米饭', price: 2 },{ id: 49, name: '蚂蚁上树', price: 13 }, { id: 50, name: '腊肉炒蒜薹', price: 15 }],
购物车列表
因为我们还没添加商品，所以购物车为空
现在用vuex编写功能函数
在store.js中
在state中：定义两个变量，分别是商品列表，购物车列表，购物车开始为空
在getters中
有四个计算变量，分别是商品列表，购物车列表、购物车商品总数量和总价格的实时更新
在mutations中：
addCart：如果商品已经添加过了就无须添加，只对其数量增加
在actions中：
完整代码
shop-list.vue页面
<div class="shop-list"> <table> <i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.id }}</span> <p>{{ scope.row.name }}</p><div class="name-wrapper"> {{ scope.row.name }}</div> <p>{{ scope.row.price }}</p><div class="name-wrapper"> {{ scope.row.price }}</div> 添加</table></div> .shop-list { width: 500px; }
shop-cart.vue页面
<div class="shop-list"> <table> <i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.id }}</span> <p>{{ scope.row.name }}</p><div class="name-wrapper"> {{ scope.row.name }}</div> <p>{{ scope.row.price }}</p><div class="name-wrapper"> {{ scope.row.price }}</div> -<span id="num">{{scope.row.num}}</span>+ 删除</table><div class="total"> <span>总数量{{totalNum}}</span><span>总价格{{totalPrice}}</span>清空购物车</div></div> .shop-list { width: 500px; margin-top: 20px } #num{ margin: 0 10px } .total{ margin-top: 30px; text-align: center; span{ margin-right: 20px } }
App.vue
<div class="home"> </div>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是vuex实现购物车功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vuex实现购物车功能
转载请注明原文链接：vuex实现购物车功能
