vuex实现购物车功能


Posted in Javascript onJune 28, 2020

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下

页面布局:

采用了element-ui的表格对商品列表和购物车列表进行布局

1、商品列表

<template>
 <div class="shop-list">
 <table>
 <el-table :data="shopList" style="width: 100%">
 <el-table-column label="id" width="180">
 <template slot-scope="scope">
 <i class="el-icon-time"></i>
 <span style="margin-left: 10px">{{ scope.row.id }}</span>
 </template>
 </el-table-column>
 <el-table-column label="名称" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.name }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.name }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="价格" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.price }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.price }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini" @click="add(scope.row)">添加</el-button>
 </template>
 </el-table-column>
 </el-table>
 </table>
 </div>
</template>

shopList数据:

//模拟商品列表数据
 shop_list: [{
 id: 11,
 name: '鱼香肉丝',
 price: 12,
 }, {
 id: 22,
 name: '宫保鸡丁',
 price: 14
 }, {
 id: 34,
 name: '土豆丝',
 price: 10
 }, {
 id: 47,
 name: '米饭',
 price: 2
 },{
 id: 49,
 name: '蚂蚁上树',
 price: 13
 },
 {
 id: 50,
 name: '腊肉炒蒜薹',
 price: 15
 }],

vuex实现购物车功能

购物车列表

vuex实现购物车功能

因为我们还没添加商品,所以购物车为空

现在用vuex编写功能函数

在store.js中

在state中:定义两个变量,分别是商品列表,购物车列表,购物车开始为空

vuex实现购物车功能

在getters中

有四个计算变量,分别是商品列表,购物车列表、购物车商品总数量和总价格的实时更新

vuex实现购物车功能

在mutations中:

addCart:如果商品已经添加过了就无须添加,只对其数量增加

vuex实现购物车功能

在actions中:

vuex实现购物车功能

完整代码

shop-list.vue页面

<template>
 <div class="shop-list">
 <table>
 <el-table :data="shopList" style="width: 100%">
 <el-table-column label="id" width="180">
 <template slot-scope="scope">
 <i class="el-icon-time"></i>
 <span style="margin-left: 10px">{{ scope.row.id }}</span>
 </template>
 </el-table-column>
 <el-table-column label="名称" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.name }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.name }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="价格" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.price }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.price }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini" @click="add(scope.row)">添加</el-button>
 </template>
 </el-table-column>
 </el-table>
 </table>
 </div>
</template>
<script>
import{mapActions} from "vuex";
export default {
 data() {
 return {
 
 };
 },
 computed:{
 shopList(){
 return this.$store.getters.getShopList
 }
 },
 methods: {
 add(row){
 this.$store.dispatch('addToCart',{id:row.id,name:row.name,price:row.price})
 },
 }
};
</script>
<style lang="less" scoped>
.shop-list {
 width: 500px;
}
</style>

shop-cart.vue页面

<template>
 <div class="shop-list">
 <table>
 <el-table :data="cartData" style="width: 100%">
 <el-table-column label="id" width="180">
 <template slot-scope="scope">
 <i class="el-icon-time"></i>
 <span style="margin-left: 10px">{{ scope.row.id }}</span>
 </template>
 </el-table-column>
 <el-table-column label="名称" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.name }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.name }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="价格" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.price }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.price }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="数量" width="180">
 <template slot-scope="scope">
 <el-button size="mini" @click="reduceNum(scope.row)" :disabled="scope.row.num == 1">-</el-button>
 <span id="num">{{scope.row.num}}</span>
 <el-button size="mini" @click="addNum(scope.row)">+</el-button>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini" @click="del(scope.$index,scope.row)">删除</el-button>
 </template>
 </el-table-column>
 </el-table>
 </table>
 <div class="total">
 <span>总数量{{totalNum}}</span>
 <span>总价格{{totalPrice}}</span>
 <el-button type="danger" @click="clearCart">清空购物车</el-button>
 </div>
 </div>
</template>
<script>
 import {mapGetters,mapActions} from "vuex";
export default {
 data() {
 return {
 shop_list: [
 {
 id: 11,
 name: "鱼香肉丝",
 price: 12
 },
 {
 id: 22,
 name: "宫保鸡丁",
 price: 14
 },
 {
 id: 34,
 name: "土豆丝",
 price: 10
 },
 {
 id: 47,
 name: "米饭",
 price: 2
 },
 {
 id: 49,
 name: "蚂蚁上树",
 price: 13
 },
 {
 id: 50,
 name: "腊肉炒蒜薹",
 price: 15
 }
 ]
 };
 },
 computed:{
 ...mapGetters({
 cartData:'addShopList',
 totalNum:'totalNum',
 totalPrice:'totalPrice'
 })
 },
 methods: {
 clearCart() {
 this.$store.dispatch('clearToCart')
 },
 addNum(row){
 this.$store.dispatch('addNum',{id:row.id})
 },
 reduceNum(row){
 this.$store.dispatch('reduceNum',{id:row.id})
 },
 del(index,row){
 this.$store.dispatch('delToShop',{id:row.id})
 }
 }
};
</script>
<style lang="less" scoped>
.shop-list {
 width: 500px;
 margin-top: 20px
}
#num{
 margin: 0 10px
}
.total{
 margin-top: 30px;
 text-align: center;
 span{
 margin-right: 20px
 }
}
</style>

App.vue

<template>
 <div class="home">
 <shop-list/>
 <shop-cart/>
 </div>
</template>

<script>
// @ is an alias to /src
import shopList from '../components/shop-list.vue'
import shopCart from '../components/shop-cart.vue'
export default {
 name: 'home',
 components: {
 shopList,shopCart
 },
 data(){
 return{
 val:''
 }
 },
 methods:{
 parent(childValue){
 // console.log(childValue)
 // this.val = childValue;
 this.val = childValue
 },
 handle(){
 console.log('gg')
 }
 }
}
</script>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 #Javascript
js瀑布流布局的实现
Jun 28 #Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 #Javascript
vue实现登录拦截
Jun 29 #Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 #Javascript
You might like
谈谈PHP语法(5)
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
解析PHP提交后跳转
2013/06/23 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
python提取内容关键词的方法
2015/03/16 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Django 框架模型操作入门教程
2019/11/05 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
MySQL面试题目集锦
2016/04/14 面试题
毕业生学校推荐信范文
2014/05/21 职场文书
党的生日演讲稿
2014/09/10 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技