使用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點個贊哦，謝謝！！