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 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
详解jquery选择器的原理
Aug 01 jQuery
webpack的CSS加载器的使用
Sep 11 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
js中开关变量使用实例
2017/02/24 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python-str,list,set间的转换实例
2018/06/27 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python os模块简单应用示例
2019/05/23 Python
python圣诞树编写实例详解
2020/02/13 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
MySQL面试题
2014/01/12 面试题
计算机专业毕业生自我鉴定
2014/01/16 职场文书
物理研修随笔感言
2014/02/14 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2014年政教处工作总结
2014/12/20 职场文书
读书笔记怎么写
2015/07/01 职场文书
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android