1、添加购物车：
0、获取本地缓存，查看是否存在购物车数据；
1、如果不存在——直接将点击事件中携带的商品数据存到本地缓存中；
2、如果存在
① 判断购物车数据中是否存在现在要加购的商品
操作：使用数组方法find，条件为id，如果id相同，则表示该商品原本就存在，否则表示商品原本不存在；find()方法返回Boolean
② 存在该商品——将该商品的数量+1
③ 不存在该商品——添加num属性，属性值为1；与已有商品一起加入到本地缓存中
注意点：
① 对于本地缓存的数据处理，需要用到JSON.parse()和JSON.stringify()。
扫描二维码关注公众号，回复： 14849430 查看本文章
② 前者是将string转换成object，后者是将object转换成string。
③ 本地缓存中的数据是string的形式，拿出来之后，需要使用JSON.parse()转换成array；
let store = JSON.parse(localStorage.getItem('carts'))
④ 同理，存储的时候，也需要将array转换成string。
localStorage.setItem('carts',JSON.stringify(store))
⑤ 点击事件中携带的商品数据本身就是object，在将新旧商品数据一起添加到本地缓存时，需要注意，要将旧的数据从数组形式解构成一条一条的对象，和新数据一起以新构成的数组形式追加到本地缓存中
localStorage.setItem('carts',JSON.stringify([product,...store]))
[{},{},{},...,{}] ----> {},{},{},...,{}
2、购物车界面
0、初始化获取本地缓存的数据
1、渲染页面
3、全选单选
（1）实现单选
forEach给每条数据添加checked属性
（2）实现全选
0、每个单选应该和全选保持一样的true和false
1、使用forEach()给每个商品的checked属性赋值allChecked
2、allChecked为true，则每个checked也为true；
3、allChecked为false，则每个checked也为false；
（3）关联全选与单选
0、购物车中每个商品的checked为true时，allChecked也应该是true
1、使用every()，只有当每个checked为true时，allChecked才会是true
2、直接将every()返回的值赋值给allChecked
4、数量加减
0、总体逻辑：本质是商品中 num 值的改变和简单的数学运算；
1、用户增减商品数量，更新本地存储数据；
2、调用getTotal()计算金额
5、金额计算
0、总体逻辑：过滤出被选中的商品，清空总价，计算总价（+=）
注意点：
① 定义变量total来确定商品价格price；
② 由于vant组件中存在固定单位，商品价格应该*100；
③ filter()过滤出用户选择的商品，返回数组；
④ 价格先清零，再进行计算，否则将保留原先计算出的价格；
⑤ 使用map()对数组中每一个商品的价格进行计算时，注意要使用 += 赋值给total.value；
⑥ 在单选全选，数量计算中调用价格计算的函数，确保每次操作都重新计算价格
6、空状态
0、标签内添加v-show；
1、store.length==0？
——购物车里没有数据，ture，显示空状态；
——购物车里有数据，false，不显示。
2、进入购物车 和删除购物车内所有的商品 时要调用
7、左滑删除
0、把数据从缓存拿出来；
1、filter过滤已经删除的数据；
2、存储最新数据
8、结算跳转
router.push('/submit') 路由跳转