当前位置: 首页 > news >正文

Vue+ElementUI+Vuex购物车

最完整最能理解的Vuex版本的购物车

购物车是最经典的小案例。

Vuex代码:

import Vue from 'vue'
import Vuex from 'vuex'
import $http from '../request/http'
Vue.use(Vuex)const store =  new Vuex.Store({state:{shopList:[],},mutations:{setShopCarList(state,payload){state.shopList = payload},change_Num(state,payload){console.log(payload);state.shopList = payload}},actions:{//获取商品async getShopList(context){const result =   await $http.shopHttp.getShopcartData()context.commit('setShopCarList',result.data.data)},//改变数量async changeNumAsync(context,payload){const result = await  $http.shopHttp.changeNum(payload)console.log('result',result);if(result.code){context.dispatch('getShopList')}},},getters:{total(state){return state.shopList.filter(item=>item.checked).reduce((prev,cur)=>prev+cur.price*cur.num,0)}}
})
export default store

组件代码:

*<template><div><el-card><el-table :data=" getshopCartList"  border><el-table-column ><template slot-scope="scoped"><el-checkbox v-model="scoped.row.checked"></el-checkbox></template></el-table-column><el-table-column prop="name" label="商品名称" align="center"></el-table-column><el-table-column   label="数量" align="center"><template slot-scope="scope"><el-input-number   :min="1" v-model="scope.row.num" size="mini" @change="(currentValue,oldValue)=>changeShoppingNum(currentValue,oldValue,scope.row)" ></el-input-number></template></el-table-column><el-table-column prop="price" label="价格" align="center"></el-table-column><el-table-column label="小计" align="center" ><template slot-scope="scope">{{ (scope.row.num * scope.row.price).toFixed(2)}}</template>op0-/</el-table-column><el-table-column  label="更新时间" align="center">{{ getshopCartList.updateDate | dateFormat }}</el-table-column><el-table-column  label="创建时间" align="center">{{ getshopCartList.createDate | dateFormat }}</el-table-column></el-table>总价:{{ this.$store.getters.total }}</el-card></div>
</template><script>
import moment from 'moment'
export default {data(){return {shopList:[],num:1,shopId:null}},methods:{changeShoppingNum(currentValue,oldValue,value){let num = currentValue - oldValuethis.shopId = value._idif (!this.shopId) {return;}else {console.log(111);this.$store.dispatch('changeNumAsync',{_id:this.shopId,n:num})}},},computed:{getshopCartList:{get(){return this.$store.state.shopList}}},filters:{dateFormat(val,myFormat,count){return moment(val).format(myFormat || 'YYYY-MM-DD')+(count ? '--'+count :'')}},created(){this.$store.dispatch('getShopList')},watch:{getshopCartList:{deep:true,handler(newVal,oldVal) {console.log(1,newVal, 2,oldVal);}}}
}
</script>

购物车

1、elementUi 中计数器的使用,

<el-input-number setp=‘1’ :min=‘1’ v-model=‘scope.row.num’ size=‘mini’ @change=‘changeShoppingNum(scope.row)’><el-input-number>

注意:

1. el-input-number标签是有默认两个参数:currentValue newValue

2. 但是在需要默认参数的情况下,还需要自定义的参数可以使用回调参数的方法。

<el-input-number

@change="(currentValue,oldValue)=>changeShoppingNum(currentValue,oldValue,scope.row)">

</el-input-number>

2、Vuex的持续化:

使用计算属性。

3、计算数字去掉浮点数:

.toFixed(2)

4、elementui表格的selection放在el-table中,选择时返回的是所选择的整个对象
5、v-model与v-bind的区别:
  1. v-model多在表单中使用,在表单元素上创建双向绑定

  1. v-model属于语法糖,写法与使用v-bind给输入框绑定value属性值,并添加input事件实现的效果是一样的,

  1. v-bind用来绑定数据和属性以及表达式,缩写为':'

如果不与input事件,无法实现v-model的双向绑定动能。

  1. v-model是以Vue实例中的数据作为数据来源。所以应该在data中声明初始值来引用

相关文章:

Vue+ElementUI+Vuex购物车

最完整最能理解的Vuex版本的购物车购物车是最经典的小案例。Vuex代码&#xff1a;import Vue from vue import Vuex from vuex import $http from ../request/http Vue.use(Vuex)const store new Vuex.Store({state:{shopList:[],},mutations:{setShopCarList(state,payload)…...

Android 录屏 实现

https://lixiaogang03.github.io/2021/11/02/Android-%E5%BD%95%E5%B1%8F/ https://xie.infoq.cn/article/dd40cd5d753c896225063f696 视频地址&#xff1a; https://time.geekbang.org/dailylesson/detail/100056832 概述 在视频会议、线上课堂、游戏直播等场景下&#x…...

【CSAPP】家庭作业2.55~2.76

文章目录2.55*2.56*2.57*2.58**2.59**2.60**位级整数编码规则2.61**2.62***2.63***2.64*2.65****2.66***2.67**2.68**2.69***2.70**2.71*2.72**2.73**2.74**2.75***2.76*2.55* 问&#xff1a;在你能访问的不同的机器上&#xff0c;编译show_bytes.c并运行代码&#xff0c;确定…...

Python操作MySQL数据库详细案例

Python操作MySQL数据库详细案例一、前言二、数据准备三、建立数据库四、处理和上传数据五、下载数据六、完整项目数据和代码一、前言 本文通过案例讲解如何使用Python操作MySQL数据库。具体任务为&#xff1a;假设你已经了解MySQL和知识图谱标注工具Brat&#xff0c;将Brat标注…...

MicroBlaze系列教程(8):AXI_CAN的使用

文章目录 @[toc]CAN总线概述AXI_CAN简介MicroBlaze硬件配置常用函数使用示例波形实测参考资料工程下载本文是Xilinx MicroBlaze系列教程的第8篇文章。 CAN总线概述 **CAN(Controller Area Network)**是 ISO 国际标准化的串行通信协议,是由德国博世(BOSCH)公司在20世纪80年代…...

网络安全领域中八大类CISP证书

CISP​注册信息安全专业人员 注册信息安全专业人员&#xff08;Certified Information Security Professional&#xff09;&#xff0c;是经中国信息安全产品测评认证中心实施的国家认证&#xff0c;对信息安全人员执业资质的认可。该证书是面向信息安全企业、信息安全咨询服务…...

stm32学习笔记-5EXIT外部中断

5 EXIT外部中断 [toc] 注&#xff1a;笔记主要参考B站 江科大自化协 教学视频“STM32入门教程-2023持续更新中”。 注&#xff1a;工程及代码文件放在了本人的Github仓库。 5.1 STM32中断系统 图5-1 中断及中断嵌套示意图 中断 是指在主程序运行过程中&#xff0c;出现了特定…...

MySQL Workbench 图形化界面工具

Workbench 介绍 MySQL官方提供了一款免费的图形工具——MySQL Workbench&#xff0c;它是一款功能强大且易于使用的数据库设计、管理和开发工具&#xff0c;总之&#xff0c;MySQL Workbench是一款非常好用的MySQL图形工具&#xff0c;可以满足大多数MySQL用户的需求。 目录 W…...

雪花算法(SnowFlake)

简介现在的服务基本是分布式、微服务形式的&#xff0c;而且大数据量也导致分库分表的产生&#xff0c;对于水平分表就需要保证表中 id 的全局唯一性。对于 MySQL 而言&#xff0c;一个表中的主键 id 一般使用自增的方式&#xff0c;但是如果进行水平分表之后&#xff0c;多个表…...

Linux防火墙

一、Linux防火墙Linux的防火墙体系主要在网络层&#xff0c;针对TCP/IP数据包实施过滤和限制&#xff0c;属于典型的包过滤防火墙&#xff08;或称为网络层防火墙&#xff09;。Linux系统的防火墙体系基于内核编码实现&#xff0c;具有非常稳定的性能和极高的效率&#xff0c;因…...

网络安全系列-四十七: IP协议号大全

IP协议号列表 这是用在IPv4头部和IPv6头部的下一首部域的IP协议号列表。 十进制十六进制关键字协议引用00x00HOPOPTIPv6逐跳选项RFC 246010x01ICMP互联网控制消息协议(ICMP)RFC 79220x02IGMP...

HTTP协议格式以及Fiddler用法

目录 今日良言:焦虑和恐惧改变不了明天,唯一能做的就是把握今天 一、HTTP协议的基本格式 二、Fiddler的用法 1.Fidder的下载 2.Fidder的使用 今日良言:焦虑和恐惧改变不了明天,唯一能做的就是把握今天 一、HTTP协议的基本格式 先来介绍一下http协议: http 协议(全称为 &q…...

自动写代码?别闹了!

大家好&#xff0c;我是良许。 这几天&#xff0c;GitHub 上有个很火的插件在抖音刷屏了——Copilot。 这个神器有啥用呢&#xff1f;简单来讲&#xff0c;它就是一款由人工智能打造的编程辅助工具。 我们来看看它有啥用。 首先就是代码补全功能&#xff0c;你只要给出函数…...

项目心得--网约车

一、RESTFULPost&#xff1a;新增Put&#xff1a;全量修改Patch&#xff1a;修改某个值Delete: 删除Get&#xff1a;查询删除接口也可以用POST请求url注意&#xff1a;url中不要带有敏感词&#xff08;用户id等&#xff09;url中的名词用复数形式url设计&#xff1a;api.xxx.co…...

【二叉树广度优先遍历和深度优先遍历】

文章目录一、二叉树的深度优先遍历0.建立一棵树1. 前序遍历2.中序遍历3. 后序遍历二、二叉树的广度优先遍历层序遍历三、有关二叉树练习一、二叉树的深度优先遍历 学习二叉树结构&#xff0c;最简单的方式就是遍历。 所谓二叉树遍历(Traversal)是按照某种特定的规则&#xff…...

Spring Cloud微服务架构必备技术

单体架构 单体架构&#xff0c;也叫单体应用架构&#xff0c;是一个传统的软件架构模式。单体架构是指将应用程序的所有组件部署到一个单一的应用程序中&#xff0c;并统一进行部署、维护和扩展。在单体架构中&#xff0c;应用程序的所有功能都在同一个进程中运行&#xff0c;…...

TCP三次握手与四次挥手(一次明白)

TCP基本信息 默认端口号:80 LINUX中TIME_WAIT的默认时间是30s TCP三次握手 三次握手过程:每行代表发起握手到另一方刚刚收到数据包时的状态 客户端服务端客户端状态服务端状态握手前CLOSELISTEN客户端发送带有SYN标志的数据包到服务端一次握手SYN_SENDLISTEN二次握手服务端发送…...

pyside6@Mouse events实例@QApplication重叠导致的报错@keyboardInterrupt

文章目录报错内容鼠标事件演示报错内容 在pyside图形界面应用程序开发过程中,通常只允许运行一个实例 假设您重复执行程序A,那么可能会导致一些意向不到的错误并且,从python反馈的信息不容易判断错误的真正来源 鼠标事件演示 下面是一段演示pyside6的鼠标事件mouseEvent对象…...

订单30分钟未支付自动取消怎么实现?

目录了解需求方案 1&#xff1a;数据库轮询方案 2&#xff1a;JDK 的延迟队列方案 3&#xff1a;时间轮算法方案 4&#xff1a;redis 缓存方案 5&#xff1a;使用消息队列了解需求在开发中&#xff0c;往往会遇到一些关于延时任务的需求。例如生成订单 30 分钟未支付&#xff0…...

< 开源项目框架:推荐几个开箱即用的开源管理系统 - 让开发不再复杂 >

文章目录&#x1f449; SCUI Admin 中后台前端解决方案&#x1f449; Vue .NetCore 前后端分离的快速发开框架&#x1f449; next-admin 适配移动端、pc的后台模板&#x1f449; django-vue-admin-pro 快速开发平台&#x1f449; Admin.NET 通用管理平台&#x1f449; RuoYi 若…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...