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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
浅析php header 跳转
2013/06/17 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
js indexOf()定义和用法
2012/10/21 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
详解vue 命名视图
2019/08/14 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
python调用shell的方法
2013/11/20 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
电钳专业个人求职信
2014/01/04 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
个人违纪检讨书
2014/09/15 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS