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

智慧商城:购物车模块基本静态结构 + 构建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.kler.cn/a/446273.html

相关文章:

  • 实现 WebSocket 接入文心一言
  • Map.put 方法
  • web3跨链桥协议-Nomad
  • python学opencv|读取图像(十七)认识alpha通道
  • 源码分析之Openlayers中MousePosition鼠标位置控件
  • QT笔记- QClipboard剪切板对QByteArray数据的复制与粘贴
  • 图解HTTP-HTTP状态码
  • ECharts散点图-SymbolShapeMorph,附视频讲解与代码下载
  • Go 语言GC(垃圾回收)的工作原理
  • 「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
  • 前端笔记——大数据量浏览器卡顿优化思路
  • 青少年编程与数学 02-004 Go语言Web编程 06课题、RESTful API
  • ChatGPT与接口测试工具的协作
  • 鸿蒙项目云捐助第十六讲云捐助使用云数据库实现登录注册
  • GaussDB 企业版轻量化部署探索
  • AIGC与现代教育技术
  • C语言-左移、右移
  • 《国产单片机,soc的一些现实问题》
  • 光谱相机在农业的应用
  • onlyoffice连接器 二次开发 合同等制式模板化技术开发方案【三】
  • 嵌入式软件C语言面试常见问题及答案解析(二)
  • 视频点播系统|Java|SSM|VUE| 前后端分离
  • ollama部署本地大模型,Linux以及python调用
  • Mac配置 Node镜像源的时候报错解决办法
  • Mybatis使用xml及纯注解实现增删改查操作
  • 【Verilog】实验八 有限状态机设计