單個購物車邏輯

• 2020 年 4 月 7 日
• 筆記

這兩天將單個購物車寫完了，這裡只講具體實現，css樣式請自定，思路如下：

html: 一個input用於自定義購買數量；兩個button用於增減ipt的value；一個錨點按鈕用於加入購物車。

需求：點擊input可以實現自定義數量，點擊加減按鈕可以在自定義val的基礎上對val進行增減，但最低為1；

基本邏輯：通過比對購物車數組內是否存在點擊的這個商品對象來決定添加商品個數還是添加這個商品到購物車

相關技術： VueX

實現過程：

1.在vuex的store內聲明一個類型為數組的shopCart變數，用於存放所有購物出數據，初始為空

const state = {    shopCartData:[]    //添加到購物車的值是一個obj類型的數據對象，所以這個購物車就是多個數據對象組成的數組  }  

2. 組件介面

   • 在data聲明一個變數puchrchaseQuantity，默認為1，在input上使用v-model綁定這個變數

   • 在給兩個增減btn添加點擊事件：

//加  increase(){          this.puchrchaseQuantity = parseInt(this.puchrchaseQuantity) + 1   // 防止在輸入狀態下值由數字轉為字元串        },  

//減  decrease(){         if(this.puchrchaseQuantity > 1){ //防止成為負數，最低為1           this.puchrchaseQuantity = parseInt(this.puchrchaseQuantity) - 1         }  

3. 點擊即加入購物車，給購物車添加點擊事件addCart

PS:雖然標籤是a，但是要使用vue-router進行路由跳轉，所以要給該a的 href = ‘javascript:;’阻止默認跳轉事件

 //  加入購物車： 組件本身不允許操作store的值，需要向mutations發射數據，然後由mutations負責處理        addCart(){           //提交到mutations內的addShopCart函數          this.$store.commit('addShopCart', {            data:this.infoData,//單個數據            num:parseInt(this.puchrchaseQuantity) //購買的數量          })        }  

3. mutations介面

   • 導入Vue

import Vue from 'vue'

* 對組件發射的數據進行處理，在這裡需要思考兩個問題： **接收到的數據條目是否已在shopCartData數組中存在？判斷存在的依據是什麼**  

import Vue from 'vue'  const mutations = {    addShopCart(state,obj){      let haveData = false // 這個變數用於判斷shopCartData中是否存在obj數據  // 1.如果存在，只需要給原shopCartData中匹配到的obj的數量上增加本次obj的數量；      state.shopCartData.forEach(e=>{          //對比shopCartData中子項的id與obj的id是否相同        if(e.id === obj.data.id){ //如果為真，說明shopCartData中存在該obj,將haveDada改為真，並將本次該obj的num(也就是數量)添加到shopCartData里id一致的obj上，實現累加          haveData = true          e.count += obj.num        }      })  //   2.剔除原shopCartData存在的obj,然後新增在shopCartData中新增這個obj      if(!haveData){        Vue.set(obj,'count',obj.num)// 先使用vue.set給這條數據設置count屬性，這個屬性標識了這個新obj的個數        state.shopCartData.push(obj)      }      console.log(state.shopCartData);    }  }  

對mutations的詳細講解：

1. haveData: 存在，默認false

2. 如果本次obj的id與shopCartData中的某個obj的id相等，就將haveData改為真，並將本次obj的num與shopCartData的已存在obj的count相加；

3. 經過上一步剔除的剩下的是原shopCartData中沒有的obj，此時haveData取反，則haveData為真：

   • 就使用Vue.set給這個obj添加count,count的值就是obj的num屬性，也就是購買的數量

   • 然後通過state.shopCartData.push(obj)將這個obj推入到shopCartData中

import Vue from 'vue'  const mutations = {    addShopCart(state,obj){ //state：vuex對象，obj:要添加到購物車總數的單個購物車對象      let haveData = false //判斷這條數據是否已在數組中存在      state.shopCartData.forEach(e=>{        if(e.id === obj.data.id){          haveData = true          e.count += obj.num        }      })      //如果原數組中不存在這條數據，就使用vue.set添加這條數據      if(!haveData){        Vue.set(obj,'count',obj.num)        state.shopCartData.push(obj)      }      console.log(state.shopCartData);    }  }  export default mutations    

這樣，就是添加單個物品到購物車的所有邏輯處理

以上。