智慧商城:购物车模块基本静态结构 + 构建vuex cart模块,获取数据存储(异步actions)

基本静态结构

静态结构直接 cv笔记中的内容 ,粘贴到 layout架子上的 cart组件中

 

 给详情页底部的 首页 和 购物车 添加点击跳转事件

 cart.vue中应用到的 van-Checkbox组件,进行该组件的引入注册

将数字框替换为之前封装好(两个+-按钮中间的1那个输入框)的组件CountBox 

 

 

构建 vuex cart模块,获取数据存储 

在store文件夹下新建 cart.js模块,存放 cart 组件数据

 

需要使用的话必须在store文件夹下的 index.js中挂载 

 

如何验证挂载好了 :到vue 调试工具中可见

在 api 文件夹中新建  cart.js模块  封装请求方法

因为请求头内容上次已经在请求拦截器中封装好,所以这里不用再写请求头参数

 

 

 想要在( vuex) store文件夹下modules文件夹下的 cart.js 中存储数据,请求回来的数据存储,则应在actions中,因为mutatios中主要处理同步,请求数据本身涉及到异步操作,所以必须写在actions中

 

注:要进行请求并存储数据,在api文件夹下的cart模块中将请求方法封装,然后在存储store文件夹下的modules文件夹下的cart模块中调用该方法进行请求打印,而不是将请求打印写在cart.vue组件中了

 设置一个mutations方法 setCartList,第一个参数一定是state,第二个参数是actions方法中传递过来的值。

在actions方法getCartAction中将请求回来的数据解构,调用mutations中的方法setCartList,并传入需要修改成的新值

 

请求回来的数据是不包含复选框选中状态,是需要用户自动维护

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/493753.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ExcelVBA编程输出ColorIndex与对应颜色色谱

标题 ExcelVBA编程输出ColorIndex与对应颜色色谱 正文 解决问题编程输出ColorIndex与对应色谱共56,打算分4纵列输出,标题是ColorIndex,Color,Name 1. 解释VBA中的ColorIndex属性 在VBA(Visual Basic for Applications)中&#xff…

前端和后端解决跨域问题的方法

目前很多java web开发都是采用前后端分离框架进行开发,相比于单体项目容易产生跨域问题。 一、跨域问题CORS 1.什么是跨域问题? 后端接收到请求并返回结果了,浏览器把这个响应拦截了。 2.跨域问题是怎么产生的? 浏览器基于同源…

有哪些免费的 ERP 软件可供选择?哪些 ERP 软件使用体验较好?

想找个 “免费” 的 ERP 软件? 咱得知道,ERP 那可是涉及财务、人力、供应链、采购、销售等好多方面的重要企业软件。功能这么全,能免费才怪呢!真要是有免费的,早就火遍大江南北,说不定把市场都垄断了&…

0.gitlab ubuntu20.04 部署问题解决

安装依赖: ① sudo apt-get update 出现: 解决方式: 去 /etc/apt/sources.list.d 这个目录删除或注释对应的list文件 第三方软件的源一般都以list文件的方式放在 /etc/apt/sources.list.d 这个目录 重新运行sudo apt-get update 安装…

中国人工智能学会技术白皮书

中国人工智能学会的技术白皮书具有多方面的重要作用,是极具权威性和价值的参考资料。 看看编委会和编写组的阵容,还是很让人觉得靠谱的 如何下载这份资料呢?下面跟着步骤来吧 步骤一:进入中国智能学会官网。百度搜索“中国智能学…

Windows中运行Linux(WSL)

Windows Subsystem for Linux(WSL)是一个在Windows 10和更高版本上运行Linux二进制可执行文件(ELF格式)的兼容层。它允许你在Windows上直接运行Linux环境,包括大多数命令行工具、实用程序和应用程序,无需修…

electron打包linux环境

注意:新版的electron已经不支持在win上直接打包Linux的环境了,服务会卡住,会一直生成文件占用磁盘(我发现的时候占了我100G,而且文件夹很深,找了java代码while循环,好不容易删除的o(╥﹏╥)o) electron有一个专门打包的docker镜像&#xff0c…

windows下搭建本地sofa-registry

官方介绍: SOFARegistry 是蚂蚁金服开源的一个生产级、高时效、高可用的服务注册中心。SOFARegistry 最早源自于淘宝的 ConfigServer,十年来,随着蚂蚁金服的业务发展,注册中心架构已经演进至第五代。目前 SOFARegistry 不仅全面服…

编译原理复习---目标代码生成

适用于电子科技大学编译原理期末考试复习。 1. 目标代码 是目标机器的汇编代码或机器码,在本课程中指的是类似于汇编代码的一种形式,由一条条的指令构成目标代码。 抽象机指令格式:OP 目的操作数,源操作数。 我们要做的&…

2024年港澳台华侨生联考师范类院校录取情况来

导读 师范类大学一直是在港澳台华侨生联考中,最受瞩目的学校类型之一,今天我们就跟大家一块来盘点一下2024年的港澳台联考中,师范类大学的录取分数线情况。(景于行提示您:我们给您提供的分数线数据真实可靠&#xff0…

常用的缓存技术都有哪些

在计算机科学和软件开发领域,缓存技术是提高系统性能和响应速度 1. 本地缓存(Local Cache): • 存在于应用程序本地内存中的缓存,用于存储频繁访问的数据,以减少对外部存储(如数据库&#xff09…

RAG开发中,如何用Milvus 2.5 BM25算法实现混合搜索

01. 背景 混合搜索(Hybrid Search)作为RAG应用中Retrieve重要的一环,通常指的是将向量搜索与基于关键词的搜索(全文检索)相结合,并使用RRF算法合并、并重排两种不同检索的结果,最终来提高数据的召回率。全文检索与语义…

简洁IIC协议讲述

目录 一:首先,IIC传输是在2条线上传输的。 二:时钟信号的频率和占空比解释(可以看作PWM波形) 三:传输信号的流程图(起始和终止信号都是由主机(我)控制) 四:开始信号和…

spring学习(spring-DI(setter注入、构造器注入、自动装配方式))

目录 一、spring容器(DI)依赖注入的几种实现方式。 (1)手动注入。 (2)自动注入。 (3)图解如下。 二、spring容器实现(DI)依赖注入-setter注入方式。 (1)setter注入方式的基本介绍。 …

AI的进阶之路:从机器学习到深度学习的演变(三)

(承接上集:AI的进阶之路:从机器学习到深度学习的演变(二)) 四、深度学习(DL):机器学习的革命性突破 深度学习(DL)作为机器学习的一个重要分支&am…

什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap

在刚刚过去的 FlutterInProduction 活动里,Flutter 官方除了介绍「历史进程」和「用户案例」之外,也着重提及了未来相关的 roadmap ,其中就有 3.27 里的 Swift Package Manager 、 Widget 实时预览 和 Dart 与 native 平台原生语言直接互操作…

mysql的事务控制和数据库的备份和恢复

事务控制语句 行锁和死锁 行锁 两个客户端同时对同一索引行进行操作 客户端1正常运行 客户端2想修改,被锁行 除非将事务提交才能继续运行 死锁 客户端1删除第5行 客户端2设置第1行为排他锁 客户端1删除行1被锁 客户端2更新行5被锁 如何避免死锁 mysql的备份和还…

基于 uniapp 开发 android 播放 webrtc 流

一、播放rtsp协议流 如果 webrtc 流以 rtsp 协议返回&#xff0c;流地址如&#xff1a;rtsp://127.0.0.1:5115/session.mpg&#xff0c;uniapp的 <video> 编译到android上直接就能播放&#xff0c;但通常会有2-3秒的延迟。 二、播放webrtc协议流 如果 webrtc 流以 webrt…

(OCPP服务器)SteVe编译搭建全过程

注意&#xff1a;建议使用3.6.0&#xff0c;我升级到3.7.1&#xff0c;并没有多什么新功能&#xff0c;反而电表的实时数据只能看到累计电能了&#xff0c;我回退了就正常&#xff0c;数据库是兼容的&#xff0c;java版本换位java11&#xff0c;其他不变就好 背景&#xff1a;…

C++ OpenGL学习笔记(2、绘制橙色三角形绘制、绿色随时间变化的三角形绘制)

相关文章链接 C OpenGL学习笔记&#xff08;1、Hello World空窗口程序&#xff09; 目录 绘制橙色三角形绘制1、主要修改内容有&#xff1a;1.1、在主程序的基础上增加如下3个函数1.2、另外在主程序外面新增3个全局变量1.3、编写两个shader程序文件 2、initModel()函数3、initS…