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加强之自定义event事件
Sep 21 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
jQuery选择器实例应用
Jan 05 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
js实现带有动画的返回顶部
Aug 09 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
汽车工程专业应届生求职信
2013/10/19 职场文书
护理专业自荐信
2013/12/03 职场文书
售后主管岗位职责
2013/12/08 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
借名购房协议书范本
2014/10/06 职场文书
商业门面租房协议书
2014/11/25 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS