码迷,mamicode.com
首页 > 其他好文 > 详细

vue项目---实现点击加入购物车

时间:2019-09-27 10:42:58      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:getters   bsp   ati   vue   一个   ons   观察   购物车   通过   

分析:使用Vuex状态管理。

点击加入购物车,将这个商品组成一个对象,放到store里面的car[]里。

1.在Goodsinfo.vue中,给加入购物车注册点击函数,addToShopCar

技术图片

 

 2.在methods中添加这个方法

   this.ballFlag=!this.ballFlag;//这是之前控制小球的显示与隐藏  

//首先,要拼接出一个加入购物车的对象,即要保存到store中car数组里面的商品信息对象。

技术图片

 3.想要向state里面存数据,不能直接调用state,而是调用mutations里面的方法,所以现在向mutations中添加加入购物车的方法,

     对应前面的addToShopCar。

技术图片

 

 4.在Goodsinfo.vue中开始添加的加入购物车函数中,添加如下代码,调用mutations的方法,向state里面存数据

技术图片

 

 5.点击加入购物车,观察vuex里面有没有对象的添加。

 6.实现购物车的徽标值

    (1).运用getters来获取state里面的数据。在getters里面添加获取徽标值的函数

技术图片

 

      (2).在徽标html的位置,直接获取,通过$store.getters.(get中的方法名)

技术图片

 

vue项目---实现点击加入购物车

标签:getters   bsp   ati   vue   一个   ons   观察   购物车   通过   

原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11595844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!