13前端项目----购物车修改

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);}
}