前幾天看到有讚的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點個贊哦，謝謝！！