vue+vuex 加入购物车学习

1、点击加入购物车按钮将商品数据添加到store中

用vuex存储加入购物车数据

安装vuex 

npm install vuex --save

注册vuex 

 

挂在到实例上

 

1、点击加入购物车将商品参数传到store中：

 

 

在商品详情组件 中加入购物车事件：

 

调用store的mutations中addToCar方法：

 

从而实现了点击加入购物车将数据存储到store中 

 

2、底部tabar组件购物车一栏的徽章数量根据store中商品数变化 

 

 

 

 3、解决刷新页面store数据清零问题

所以购物车数据存在store的同时也存在localStorage一份

所以在store的mutations中的addToCar方法中：

改完后一刷新页面，本地存储中有数据，但是底部tabar的徽章数量还是为0