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

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

每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：

所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。

在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：

开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。

主要用到的是移动端适配方案：flexible.js + rem的方案

首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息

方案一：使用定位+transition的方式实现

方案二：使用transform + transition的方式实现

其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。

初识CSS抛物线动画

https://github.com/HyFun/CSS-Sample-ElemeAnimate

---