【购物车联动】

1. 功能长啥样

PS： CSS样式没有深入做到细致

---

2. 找思路

一. 加减组件

1. 右侧"商品栏"的加减功能抽象成一个组件
2. 这个加减组件接受一个food-item也就是右侧"商品栏"的商品字段
   // 利用这个字段的信息, 商品价格price&&商品名称desc都可以拿到
3. 关键在于接受这个字段后, 使用到的一个Vue.set( obj,key,value）API
   // 这个API可以设置改变每一个food-item字段的count
   // 从而达到一个全局享用的效果

二. 底部弹出层

1. 这个弹出层接受来自父组件的一个数组selectFoods
   // 这个数组不是通过加减的点击事件来push进去
   // 而是通过计算属性遍历每一个food-item字段
   // 如果count存在, 则把这个food-item push进一个空数组
   // 每当点击加减组件时, 计算属性会重新计算一遍, 返回一个新数组

三. 拓展

1. 理解了这个思路, 完成详情页的加入购物车和弹出层的清空购物车也不难实现了
2. 加入购物车的详情页接受一个food-item的字段, 然后改变set count
3. 清空购物车, 遍历selectFoods数组的每一个item.count = 0

---

PS: 如何用Vue实现下面的小功能

找思路：

1. 根据后台返回的商家评价Number
2. 再加上设计给的满星, 半星, 空星图根据数据动态绑定样式
3. 比如第一颗星的判断条件是
   :class={ off: num==0, half: num>0&&num<=0.5, on: num>0.5 }
   // 其余的星星依次类推

思路有了, 技术细节就不多说了, 利用第三方css框架还有更简便的方法

---

PPS => 购物车可以用Vuex实现, 会更好