使用VueX实现购物车功能

假设你已经完成相关html css 布局

 

1.给加减按键绑定点击事件，传递店铺Id，商品id 商品详情 ，加减数以及店铺名

2.点击事件派发一个action 名为 changeCartItemInfo,并且传递参数

3.mutations感知到提交的changeCartItemInfo改变，执行changeCartItemInfo方法，在这个方法中，接收两个参数，vue中的state和外面传递进来的payload,定义一个shopinfo等于vuex中传递进来的店铺id,如果不存在则为{}（刚开始vuex中没有数据所以不存在），定义一个product 等于店铺id下的商品id,如果没有，product等于传递进来的商品详情且商品数量为0.

存在商品信息的话，商品数量进行计算且设定最小值，vuex中定义的数据重新赋值等于改变后的数据

4.从vuex中获取数据

5.页面渲染，如果存在就用，不存在就为 0

6.巧用computed计算属性计算总价和总数

获取到产品列表，定义 返回结果的初始值，如果存在产品信息，for循环遍历商品，定义product等于商品循环项，计算商品总数，如果商品选中，进行价格计算，return出结果

 

7.页面渲染