加入购物车按钮

路由跳转之前的请求
成功路由跳转与参数传递

浏览器存储功能：h5新增，本地存储+会话存储
本地存储：持久化的 – 5m
会话存储：浏览器打开与关闭的时候，非持久化，sessionstory
3. 失败提示的信息

购物车列表组件 addcartsuccess

查看详情，
查看购物车

购物车

购物车静态组件，修改样式
发请求拿购物车数据api，vuex，渲染组件 /api/cart/cartList
临时游客数据
uuid:生成一个随机的id
动态展示购物车数据
修改购物车产品的数量（发请求，修改参数）存在bug没有防抖，点快了有负数数量存在 lodash节流
删除某一产品 /api/cart/deleteCart/{skuId} DELETE
修改产品的状态是否选中了 /api/cart/checkCart/{skuID}/{isChecked} get
全选

–. 全选的复选框，
–. 多少件。

async checkedAll() {
     if (this.isAllChecked) {
       await this.cartInfoList.forEach((item) => {
         item.isChecked = 0;
         try {
           this.$store.dispatch("updateCheckedById", {
             skuId: item.skuId,
             isChecked: item.isChecked,
           });
           this.getData();
         } catch (error) {
           alert(error.message);
         }
       });
     } else {
       await this.cartInfoList.forEach((item) => {
         item.isChecked = 1;
         try {
           this.$store.dispatch("updateCheckedById", {
             skuId: item.skuId,
             isChecked: item.isChecked,
           });
           this.getData();
         } catch (error) {
           alert(error.message);
         }
       });
     }
   },

视频中没有完成全选的功能：我这边试着实现发现了这方法有bug:
当购物车中的产品只有一件的时候，全选第一次点击会闪一下全选但最后没有成功全选，需要第二次点击才能全选，应该是forEach的问题，不知道如何解决。也许需要换一种方法，毕竟发了n次请求。
最后我感觉这个可能需要后端来解决，做一个全选的get请求，这样只需要发一次请求就行了。

删除所有选中的产品

async deleteAll(){
  await this.cartInfoList.forEach(item => {
    if(item.isChecked == 1){
      this.deleteShopCartByskuId(item.skuId);
    }
    this.getData();
  });
}

同样的方式处理：当购物车数量为1的时候也有bug，报错。

重点来了，如何解决 8和9的bug呢？

后面视频有讲解怎么处理这个问题，通过派发一个新的action，在vuex中处理，直接删除n个购物车数据，这样就不会存在当购物车数据为1时的forEach错误问题或者bug了！
yysy，自己的经验还是不足，如果我来开发可能解决不了这个bug，我感觉应该是对于vue的不熟悉，所以还是需要多学！

Promise.all([p1,p2,p3,p4])
如果有一个p失败，都失败，如果都成功，才成功
通过派发action来实现，vuex中代码如下

// 删除选中的购物车的数据
deleteAllCart({ dispatch, getters }) {
  // console.log(dispatch);
  let promiseAll = [];
  getters.cartList.cartInfoList.forEach(item => {
    if (item.isChecked == 1) {
      let promise = dispatch('deleteShopCartBySkuId', item.skuId);
      promiseAll.push(promise);
    }
  });
  // 只有所有的删除都成功了才成功，
  return Promise.all(promiseAll);
}