码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Day15--加入购物车实现加入购物车的功能


    1.在商品详情页中使用 Store 中的数据[为了验证我们的vuex是否配置成功我们先验证一下能不能拿到数据哈]

     我的操作:

    1》在 goods_detail.vue 页面中,修改  标签中的代码如下:

    注意:今后无论映射 mutations 方法,还是 getters 属性,还是 state 中的数据,都需要指定模块的名称,才能进行映射。

    2》 在页面渲染时,可以直接使用映射过来的数据,例如:

     

    3》因为我们目前是用不上这个cart数组的,所以把刚刚的验证的代码清除一下。

     

    2.实现加入购物车的功能

     我的操作:

    1》在 store 目录下的 cart.js 模块中,封装一个将商品信息加入购物车的 mutations 方法,命名为 addToCart。示例代码如下:

    参考以前在尚品汇里面写的vuex仓库:【理解一下mutations里面应该放上面东西呢?】

     在cart.js里面编写代码:

    2》在商品详情页面中,通过 mapMutations 这个辅助方法,把 vuex 中 m_cart 模块下的 addToCart 方法映射到当前页面:

     

    3》为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick" 事件处理函数:

     

    1>根据e.content来判断点击是哪一个按钮呢?

     

     

    2> 绑定事件函数

     

     最后看看我们忙活了这么久的成果:

     

     

  • 相关阅读:
    【如何拍出一条好的vlog】素材篇
    ‘std::thread‘ has not been declared
    如何有效应对差评对亚马逊销量的影响及应对措施
    JavaScript事件对象参数
    如何实现设备组缓存的正确清除?——基于心跳请求和心跳响应的解决方案
    【信息检索】信息检索系统实现
    运动控制机器视觉智能制造上位机定制方案
    Linux 之 Ubuntu 下安装配置ARM交叉编译器(工具链)的简单整理
    使用线程池的10个坑
    Three.js真实相机畸变效果模拟
  • 原文地址:https://blog.csdn.net/qq_59110215/article/details/128101623
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号