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

ops/2024/12/22 16:21:28/

基本静态结构

静态结构直接 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.ppmy.cn/ops/144067.html

相关文章

如果模块请求http改为了https,测试方案应该如何制定,修改

作者:逍遥Sean 简介:一个主修Java的Web网站\游戏服务器后端开发者 主页:https://blog.csdn.net/Ureliable 觉得博主文章不错的话,可以三连支持一下~ 如有疑问和建议,请私信或评论留言! 前言 将模块的请求协…

电脑频繁弹出“缺少d3dcompiler_47.dll”提示?“缺少d3dcompiler_47.dll”要怎么解决?

电脑频繁弹出“缺少d3dcompiler_47.dll”提示?一文带你了解原因与解决方案 在日常使用电脑的过程中,不少用户可能会遇到系统频繁弹出“缺少d3dcompiler_47.dll”的提示。这个看似陌生的文件名,实则对电脑游戏的运行至关重要。d3dcompiler_47…

【UBUNTU 20】环境变量

查看环境变量 # 查看所有环境变量 export env# 查看指定环境变量 echo $PATH修改环境变量 命令式修改 立即生效仅在当前终端窗口有效,窗口关闭后无效仅对当前用户有效 export PATH${HOME}:$PATH修改 ~/.bashrc 永久有效仅对当前用户有效 vim ~/.bashrc# 在最后…

TypeScript与JavaScript的区别

本文我们要聊一聊 TypeScript 和 JavaScript 之间的区别。可能我们已经注意到,TypeScript 是 JavaScript 的超集,那么它到底比 JavaScript 多了些什么?为什么我们要选择 TypeScript,而不仅仅是写普通的 JavaScript 呢?…

从监控异常发现网络安全

前言 最近在前端异常监控系统中,发现一些异常信息,从中做了一些分析,得到一些体会,因此作文。 发现异常 某天早上打开监控系统发现,当天凌晨1点过测试环境有2个前端上报的异常,报错的原因都是由于没有获取…

华为OD --- TLV解码

华为OD --- TLV解码 题目独立实现理解思路AC源码 题目 独立实现 理解 个人认为这题最大的难点就是理解题目 以测试用例举个🌰 31 32 01 00 AE 90 02 00 01 02 30 03 00 AB 32 31 31 02 00 32 33 33 01 00 CC题目需要找到tag 31对应的value值. 示例中第一个tag值为…

uniapp navigateTo、redirectTo、reLaunch等页面路由跳转方法的区别

uni.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 // app.json {"tabBar": {"list": [{"pagePath": "index","text": "首页"},{"pagePath": "other","text&…

【专升本】倒计时99天

2024年12月21日到2025年3月29日共有 99​ 天 一、计算机基础 1.1 计算机历史 口诀:1 雏 2 人 3 第一 4 代机器 5 趋势 1️⃣雏形——>分析机——>巴贝奇 2️⃣人——>图灵,设计了图灵机(一条无限长的纸带 & 一个读写头&…