在看了官网vuex的文档后,心血来潮模拟了一下购物车的功能
首页在state中手动存储了数据用于页面渲染

image.png
在组件中从store这个仓库中取出当前购物车商品的数据并且渲染到页面中

image.png
最终呈现出来就是这个样子

image.png
当然里面的功能就是如何判断商品的数量变化后如何将当前商品的状态从state中改变,
当我们点击增加加一的操作后这时候我们要去改变store中的状态,唯一的方法就是提交mutation

image.png

image.png
在commit提交的时候得将car数组的索引值提交过去,在mutation中我们要根据index来判断当前那哪个商品被增或减
实现完商品数量的增减,其他的就简单了
计算购物车总价格这种就可以使用store中getters来进行计算

image.png

image.png
当然了,如果想在购物车中再添加一件商品也是可以的,点击添加购物车按钮可以将商品提交mutation给store改变购物车的的商品数量

image.png

image.png
最终效果就是当我们改变了商品数量或者添加一件商品,store中的状态也会随之改变

image.png

image.png