转载
https://segmentfault.com/a/1190000016936910
使用vuex搭建的购物车，将加入购物车的商品存储到vuex，实现购物车的预览与购物车里对商品的数量的选择（包括左滑删除商品），附上购物车图片：
商城的一个重点的功能，就在于购物车的实现。vuex可以很好的帮我们来实现购物车。
1.首先，我们得对vuex有一定的了解，还未了解vuex的小伙伴可自行去vuex官网仔细查看。
购物车的实现，首先我们在state里面创建一个空数组，作为储存购物车商品的仓库，同样我们也需要创建一个对象来存放商品的总价和总数：
shopcartfn:{num:'',price:'',
},
shopcartprods:[],
2.其次我们需要在action里面对加入购物车进行处理（注意vuex中的异步都需要在action中处理，action的最终也是触发mutations来对state的数据进行修改）
setshopCart({commit,state},products){if(state.shopcartprods.length>0){new Promise((resolve,reject)=>{let arr=[]for(var i=0;i<state.shopcartprods.length;i++){//先将goods_id和当前size的id放到数组 后面判断添加的 在arr中是否有arr.push({goods_id:state.shopcartprods[i].goodsId,good_id:state.shopcartprods[i].selectedSkuComb.id})}let brr={goods_id:products.goodsId,good_id:products.selectedSkuComb.id}//JSON.stringify(arr).indexOf(JSON.stringify(brr))!=-1判断没有赋值关系的json是否在数组中 ；没赋值关系不能直接indexOf()if(JSON.stringify(arr).indexOf(JSON.stringify(brr))!=-1){ for(var i=0;i<state.shopcartprods.length;i++){if(arr[i].goods_id==brr.goods_id&&arr[i].good_id==brr.good_id){resolve(i)}} }else{reject(state.shopcartprods.length)}}).then(res=>{Object.assign(products,{index:res})commit('addproduct',products) return},err=>{Object.assign(products,{index:err})commit('storeproduct',products)}) }else{Object.assign(products,{index:0})commit('storeproduct',products)}
}
我们在setshopCart状态中，对已有的商品进行判断，如果已经在shopcartprods有当前加入的商品，则对当前商品对数量增加，否则就push到shopcartprods中。
3.action的本质是触发mutations，所以我们在mutations中，进行shopcartprods的数据的更改
storeproduct(state,value){state.shopcartprods.push(value)},addproduct(state,value){state.shopcartprods[value.index].selectedNum=state.shopcartprods[value.index].selectedNum+value.selectedNum },
4.最后，我们需要对购物车内商品对总数和价格进行统计，这时候我们就需要用到getter。在getter中我们计算商品的总数和总价格
shopcartdata:(state)=>{let cartdata={price:0,num:0}for(let i=0;i<state.shopcartprods.length;i++){cartdata.price=state.shopcartprods[i].selectedNum*state.shopcartprods[i].selectedSkuComb.price+cartdata.price;cartdata.num=state.shopcartprods[i].selectedNum+cartdata.num}// cartdata.price=cartdata.price*100return cartdata}当我们在购物车显示getter的总价时，只需要在computed中获取getter中的数据
computed: {
shopcartdata() {return this.$store.getters.shopcartdata;
}
},
自此，购物车的逻辑基本完成。
附上原作者github地址:https://github.com/noobzzzz/vantmbshop，希望能对需要的小伙伴有所帮助，如果对您起到了帮助，请帮原作者github点个赞哦，谢谢！！