任务背景

任务描述

根据接口数据和美团APP，仿照美团购物界面进行开发，构建商品与购物车之间的逻辑关系

训练目标

  1. 理解UI刷新原理
  2. 掌握组件间传值方法，如@Prop、@Link、@Provide与@Consume
  3. 掌握持久化方法

实现思路

布局

用Coloumn、Row进行布局，通过onClick和if-else触发或切换组件

传值

  1. 将商品写成对象数组通过@Link传递
  2. 商品数量令用一个number数组存储到AppStorage上

问题与解决方案

问题 解决方案
加入商品数组的会有重复 写一个面对对象数组的去重函数

优化

待优化方向

  1. 对商品数组和商品数量数组做持久化

具体优化思路

参考答案分析

总结

有点麻烦，但没啥难度。收获不少，如下：

  1. 对象数组的去重
dedupe() {
  let newCart:Foods[] = []
  this.shoppingCartArr.forEach((item:Foods)=>{
    return newCart.includes(item)?'':newCart.push(item)
  })
  this.shoppingCartArr = newCart
}
  1. 传值
    @Link

@ObjectLink与@Observed


@AppStorage