vuejs仿美团，饿了么项目之——商品数量加减篇

首先，新增个商品数量的加减功能组件，就叫cartcontrol.vue吧。新增个底部购物车组件，叫shopcart.vue吧。在判虚good.vue中引入并注册组件。

cartcontrol.vue中，通过props来接收list对象

因为盯败我在json中没有设置数量这个key，所以需要全局用vue.set进行注册这个属性。在add方法中，如果没有这个属性，那么就注册，如果有，那么就count++

这里增加了一点小效果。应用了<transition>。 并且当数量减到0的时候。通过v-show来控制减号和数值是否显示。

写的比较粗糙，估计只有我自己能懂。这里要注意一下，在BScroll实例中要配置下click:true。使better-scroll滚动部分支持点击掘则燃事件。否则加减号的点击事件无效。好吧~下篇写下底部的购物车功能。

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钩子函数，原理就是先把小球写死到购物车，点击的时候瞬间移入到需要的位置，然后做一个过渡动画即可，加入贝塞尔曲线。

配置全局的Store

具慎念派体高源页面调用Store

store/index.js 加入购物车 本地存储 vuex里面 *** 作

Vue+Vuex 实现商品宽贺购物车

---