uuid臨時游客身份

請求數據+倉庫發起請求
->問題：獲取不到購物車數據？

所以需要一個身份，告訴服務器是誰存的數據？是要獲取誰的數據？

//引入
import {v4 as uuidv4} from 'uuid';
//生成具有唯一標識的字符串作為id
uuid_token = uuidv4();

utils文件存放與業務邏輯無關的公共工具函數、輔助方法或通用邏輯
將生成一個隨機游客身份，將 游客身份 UUID 放在 HTTP 請求頭 中隨每次請求發送給后端，后端在所有接口中都能識別同一游客，并關聯其行為數據

1. 為了保證存儲一次游客身份的永久性，每次訪問都是通過游客身份而不是每次重新生成一個新的游客身份----通過localStorage

//uitl
import {v4 as uuidv4} from 'uuid';export const getUUID = ()=>{let uuid_token = localStorage.getItem('UUIDTOKEN');if(!uuid_token){//本地沒有存儲，則生成一個uuid_token = uuidv4();//然后存儲到本地localStorage.setItem('UUIDTOKEN',uuid_token);}return uuid_token;
}

2. 在倉庫中存儲uuid，uuid_token=getUUID()
3. 把uuidToken加在請求頭中：在axios請求攔截器rquest.use((config)=>{})中，請求頭添加字段（userTempId)config.header.userTempId = store.state.detail.uuid_token

購物車部分功能

全選

• every用于判斷購物車是否已經全選

every(item=>{表達式})遍歷數組，若每項全都滿足條件則返回true,否則返回false

isAllCheck(){return this.cartInfoList.every(item=>item.isChecked===1)
}

修改商品數量

綁定handler函數，參數（type,disNum,cart）分別表示：操作行為、數量變化（正/負/0）、cart是商品信息

• 減少：@click=“handler(‘minus’,-1,cartInfo)”
• 輸入框：@change=“handler(‘change’,$event.target.value,cartInfo)”
• 增加：@click=“handler(‘add’,1,cartInfo)”

添加節流操作：當快速多次修改產品數量時，會出現負數/0的現象

handler:throttle(async function(type,disNum,cart){if(type === 'minus') {//當商品數量為1時，不可再減少if(cart.skuNum === 1){return;}}if(type === 'change'){//輸入內容不合法時if(isNaN(disNum * 1)  || disNum <= 0){disNum = 0;}else{//parseInt取整計算差值disNum = parseInt(disNum) - cart.skuNum}}//加按鈕disNum不需要改變try{//更新服務器數據await this.$store.dispatch('addOrUpdateShopCart',{skuId:cart.skuId,skuNum:disNum})//再次獲取服務器新的數據await this.$store.dispatch("getCartList")}catch (error){alert(error)}
},500),

修改商品勾選狀態

1. 封裝刪除商品的接口reqUpdateCheckedById函數

export const reqUpdateCheckedById = (skuId,isChecked)=>requests({url:`/cart/checkCart/${skuId}/${isChecked}`,method:'get'});

2. 倉庫寫action發送請求

async updateCheckedById({commit},{skuId,isChecked}){let result = awiat reqUpdateCheckedById(skuId,isChecked);if(result.code===200){return 'ok';}else{return Promise.reject(new Error('fail'));}
}

3. 綁定change事件觸發updateChecked

//傳入商品信息cart
//event參數獲取當前勾選狀態
async updateChecked(cart,event){
try{
//如果獲取成功則再次獲取服務器數據let isChecked = event.target.checked?1:0;await this.$store.dispatch("reqUpdateCheckedById",{cart,isChecked});this.getDate();}catch(error){alert(error.message);}
}

刪除產品

通過后臺提供的刪除單個商品的接口，傳入商品skuId，和之前差不多，我就省略了封裝接口函數，然后在actions中封裝成發送請求函數async deleteCartListBySckuId({commit},skuId){……}最后組件里面綁定事件派發actions等一樣的操作。

當需要刪除全部勾選的產品，該怎么做呢？沒有相應的接口處理

當然可以method中遍歷多次dispatch一個個刪除，在這里我們將批量刪除封裝為actions函數deleteAllCheckedCart

• 首先需要知道：deleteAllCheckedCart(context){console.log(context)}中conext是什么？
  conext實際上是個小倉庫
  commit【提交mutations修改state】getters【計算屬性】 dispatch【派發actions】
  如此我們便可以拿到想要的購物車數據通過getters，然后也可以派發actions
  注意解構出所需要的getters和dispatch

deleteAllCheckedCart({getters,dispatch}){//forEach遍歷cartInfoListlet PromiseAll = [];getters.cartList.cartInfoList.foEach(item=>{//需要過濾掉沒有被勾選的產品let promise = item.isChecked==1?dispatch('deleteCartListBySckuId',item.skuId):'';//dispatch返回一個Promise//那么每次刪除一個產品都會返回一個Promise//那么可以把每個對象放到promise.all中PromiseAll.push(promise);});//返回結果是失敗還是成功return Promise.all(PromiseAll);
}

• Promise.all()
  promise.all([p1,p2,p3])中是個數組，每一個p1、p2、p3、都是一個promise對象，如果有一個promise返回的是失敗，那么都是失敗，都成功才會成功

組件methods中:

async deleteAllCheckedCart(){try{await this.$store.dispatch('deleteAllCheckedCart');//再次發送請求獲取購物車列表this.getDate();}catch(error){alert(error.message);}
}