前几天看到有赞的vant，顿时对做一个商城项目产生了兴趣。说干就干，让我们来一步步实现。
预览地址：http://zy.whaoot.com/dmodel/i...
已实现购物车逻辑，商城首页等功能。
商城首页：

使用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;
}

},

自此，购物车的逻辑基本完成。

不得不说vant还是将业务模块的组件做的很不错的，部分商城业务组件可以直接上手就用。

附上github地址:https://github.com/noobzzzz/v...，希望能对需要的小伙伴有所帮助，如果对您起到了帮助，请github点个赞哦，谢谢！！