购物车三级联动分析

在做YZ项目时购物车三级联动没分析清楚,写下这篇来梳理业务逻辑

分析

  • 购物车列表(cartList)异步获取
  • 层级关系为 单个商品选中——店铺选中——全选,三个层级相互依赖,相互联系
  • 控制选中状态核心在于 单个商品及店铺的状态 所以在获取数据之后应当立即对shop.checked和good.checked进行初始化(由于Vue的响应式原理,需要先处理数据后赋值才能使checked动态响应)
  • 自下而上:从对单个商品的状态判断店铺和全选的状态,从店铺的状态判断全选的状态
  • 自上而下:从全选的状态直接控制店铺和单个商品的状态,从店铺的状态直接控制单个商品的状态
  • 全选比较特殊,控制所有,又被牵连其中,使用计算属性get和set