水果购物车业务

---

需求说明

1. 渲染功能
2. 删除功能
3. 修改功能
4. 全选反选功能
5. 统计 选中的 总价 和 总数量
6. 持久化到本地

---

业务技术点总结：

1. 渲染功能： v-if/v-else v-for :class
2. 删除功能： 点击传参 filter过滤覆盖原数组
3. 修改个数： 点击传参 find找对象
4. 全选反选：计算属性computed 完整写法 get/set
5. 总价和总数量： 计算属性 computed reduce条件求和
6. 持久化到本地： watch监视，localStorage，JSON.stringify存 ，JSON.parse读取

代码示例

<scritp> 
const defaultArr = [{id: 1,icon: 'http://autumnfish.cn/static/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'http://autumnfish.cn/static/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'http://autumnfish.cn/static/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'http://autumnfish.cn/static/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'http://autumnfish.cn/static/樱桃.png',isChecked: false,num: 20,price: 34,},]const app = new Vue({el: '#app',data: {// 水果列表fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,},computed: {// 计算属性默认只能获取，需要设置需要写完整写法isAll: {// 所有的小选框的选中状态，全选才选中get() {return this.fruitList.every(item => item.isChecked)},set(value) {// 基于拿到的value布尔值，要让所有的小选框， 同步状态this.fruitList.forEach(item => item.isChecked = value)},},// 统计选中的总数   reducetotalCount() {return this.fruitList.reduce((sum, item) => {if (item.isChecked) {// 选中  需要累加return sum + item.num} else {// 没选中 不需要累加 返回sum即可return sum}}, 0)},// 统计选中的总价totalPrice() {return this.fruitList.reduce((sum, item) => {// 选中   需要价格if (item.isChecked) {return sum + item.num * item.price} else {return sum}},0)}},methods: {del(id) {this.fruitList = this.fruitList.filter(item => item.id !== id)},reduce(id) {// 1. 根据id 找到数组中的对应项const fruit = this.fruitList.find(item => item.id === id)// 2. 操作 num 数量fruit.num--},add(id) {// 1. 根据id 找到数组中的对应项const fruit = this.fruitList.find(item => item.id === id)// 2. 操作 num 数量fruit.num++}},// 监视器，监视所有数据是否发生变化watch: {fruitList: {deep: true,handler (newValue) {// 需要将变化后的   newValue  存入本地  （存进去前需要转 JSON）localStorage.setItem('list',JSON.stringify(newValue))}}}})</script>

当前购物车业务，除了没有使用axios与服务器存储交互以及支付功能。其他的都使用到了。