文章插图
同时获取到的数据不应该存进data里面而是vuex里面
文章插图
注意 ， commit是this里面的 ， 而且前面要带命名
文章插图
2.7.4 addstr将其放到vuex里面并非计算节点里面
文章插图
文章插图
2.7.5 重新选择地址就是将地址来一个点击事件 ， 重新用到chooseAddress这个api
文章插图
文章插图
2.8 结算2.8.1 封装组件定义好组件的位置
文章插图
文章插图
然后里面的逻辑分为全选、合计和结算
文章插图
注意一下 ， 当宽度不确定的时候 ， 这个时候想让两边有一定的留白感觉设置了宽度一样 ， 可以直接设置padding不设置宽度
文章插图
文章插图
2.8.2 已选商品数量和状态首先已选商品数量是在vuex里面完成 ， 通过getters筛选出来
思路是这样的先filter筛选出state为true的 ， 然后通过reduce计算出所有的count的值
文章插图
直接使用即可
文章插图
关于状态
就是全选按钮的状态
也是通过getters来做 ， 这里可以不用检查每一个的goods_state ， 我们的getters里面有两个计算属性
文章插图
一个是总共的count数量给tabbar的购物车用的 ， 一个是勾选的count数量给结算那里用的 ， 我如果比较当总共的count等于勾选的count是不是就相当于全选了
文章插图
文章插图
2.8.3 全选全不选在vuex完成 ， 创建一个mutations ， foreach完成循环修改记得重新保存进storage
文章插图
拿到组件里面注册 ， 给全选按钮绑定点击事件
文章插图
这里主要就是我们的全选状态怎么拿 ， 前面做过一个计算属性 ， 可以直接通过这个拿
文章插图
2.8.4 所选商品总价也用vuex来完成 ， 先筛选state为true ， 在这里面接着reduce ， 加上每一个单价乘以数量的值 ， 然后fixed保留两位小数
经验总结扩展阅读
- 支付宝蚂蚁庄园2022年8月14题目答案是什么
- 金铲铲之战小小阿卡丽多少钱
- 温柔高格调的签名短句 精致又很小众的签名
- 小米手机和华为手机哪个好_小米耐用还是华为耐用
- 小朋友玩耍开心的朋友圈说说
- 祝愿小朋友的成长寄语 祝福女儿未来美好的句子
- 2023年11月22日农历十月初十小雪宜乔迁吗
- 微信小程序canvas 证件照制作
- 2022蚂蚁庄园8月16日答案最新
- 小米盒子4s pro评测_小米盒子4s pro怎么样