使用vue+vant搭建商城

前几天看到有赞的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*100
       return cartdata
  }

当我们在购物车显示getter的总价时，只需要在computed中获取getter中的数据
computed: {

shopcartdata() {
  return this.$store.getters.shopcartdata;
}

},

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

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

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