7-加入购物车、购物车删除(vuex)

7-加入购物车、购物车删除(vuex),第1张

1.首先购物车d窗是一个组件,因为会出现在不同的页面中。

2.因为很多组件会用到购物车数据,所以统一放到vuex中。

============================================================

至此,已经完成了加购物车,并且计算数量和金额。

============================================================

一开始我的思路是

1、删除数据肯定是要改变state,改变state肯定是需要提交mutation,所以删除的相关逻辑方法应该写在mutation;

2、当时我的问题是如何知晓删除的是哪一条数据?

通过学习,弄清楚了,以后此类需求,都和加入购物和思路是一致的,都是通过对比删除的当前的ID和数据里的所有ID进行比对,就知道是删除具体哪条数据了。

3、那么我需要记住,当前选择的是哪条数据,都是通过在删除的点击方法对应的事件里,参数中传递当前数据(商品ID)即可。 这是一个思路,需要牢记

具体实现步骤总结

点击购物车页面的删除商品按钮,绑定一个删除方法,参数传入当前被点击的商品ID,在这个方法里调用mutation里面的删除商品方法:

思路 : 这类显示隐藏的案例,都是设置变量属性的ture/false

首先是有一个d窗组件,当商品数量大于最大值得时候,这个组件需要d出。

数据中已经有了最大值 : limit_num。

在state中定义一个变量:maxOff :false ,默认不显示,当购物车中商品增加的时候,比对当前商品的数量是否已经大于了limit_num,如果是,就让这个d窗出来,也就是在mutation中设置该属性为true。

思路: 一样的,这类显示隐藏,需要设置一个开关,去切换开关即可。

思路 :用的vue的transtion钩子函数,原理就是先把小球写死到购物车,点击的时候瞬间移入到需要的位置,然后做一个过渡动画即可,加入贝塞尔曲线。

1、 建立git仓库

2、 本地建仓,克隆SSH地址

3、 使用VueCli创建项目

4、 安装VantUi

5、 VantUi组件独立化

在src同级目录下新建文件夹 vantui , 新建文件 index.js

在 main.js 文件中引入 vantui / index.js

点击【登录】登录成功后跳转至/index页面,并带上从/login 登录页面跳转过来的唯一标识params == 'login'

一进页面,就获取一下路由传参,如果params == 'login' 就调用获取购物车方法,否则不调用

这么做的好处是,在App.vue调用了一次getCartCount()在项目加载时先去加载获取购物车数量的方法,给头部的购物车数量赋值,但在页面刷新的时候不会再调用getCartCount(),如果用户登录——增加3件商品到购物车——退出——再登录——顶部的购物车总数量不会+3,因为再次登录只是页面刷新,在App.vue的getCartCount()方法不会再次调用,所以需要再NavHeader.vue单独再调用一次,确保购物车总数量是最新的值


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11932925.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存