vue制作水果购物车

需要实现以下功能：

1、基本渲染

2、删除和修改数量

3、全选反选

4、统计选中的总价和总数量

5、持久化到本地

一、基本渲染（省略）

data:

data: {
  // 水果列表
  fruitList: [
    {
      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,
    },
  ],
},

二、删除和修改数量

删除：在删除按钮中添加点击事件，传入id

<button @click="del(item.id)">删除</button>

methods中写入方法：

del (id) {
  this.fruitList = this.fruitList.filter(item => item.id !== id)
      },

数量加减：在加减按钮中添加点击事件，通过id对数组中的num进行增减

当数量<=1时，减号被禁止使用

<button :disabled="item.num <= 1" class="decrease" @click="sub(item.id)"> - </button>
<span class="my-input__inner">{{ item.num }}</span>
<button class="increase" @click="add(item.id)"> + </button>

methods中写入方法：

add(id) {
  // 1. 根据 id 找到数组中的对应项 → find
  const fruit = this.fruitList.find(item => item.id === id)
  // 2. 操作 num 数量
  fruit.num++
},
sub(id) {
  // 1. 根据 id 找到数组中的对应项 → find
  const fruit = this.fruitList.find(item => item.id === id)
  // 2. 操作 num 数量
  fruit.num--
}

三、全选反选

在全选框先使用v-model=“isAll”进项关联，在computed中写入代码isAll，实现全选反选功能

isAll: {
  get() {
    // 必须所有的小选项都选中，全选按钮才选中 every
    return this.fruitList.every(item => item.isChecked);
  },
//  基于拿到的布尔值，让小选框同步状态
  set(value) {
    this.fruitList.forEach(item => item.isChecked = value)
  }
}

四、总数和总价：

 在computed中写入计算方法：

对以及勾选的商品进行计算，需要判断isChecked的布尔值

totalCount() {
  return this.fruitList.reduce((sum, item) => {
    // 计算选中的总数
    if (item.isChecked) {
      return sum + item.num;
    } else {
      return sum
    }
  }, 0);
},
totalPrice() {
  // 计算选中的总价
  return this.fruitList.reduce((sum, item) => {
    if (item.isChecked) {
      return (sum + item.num) * item.price;
    } else {
      return sum
    }
  }, 0);
}

五、持久化到本地

在watch监听器中写入代码，将数据转为字符串存入本地存储 

watch: {
  fruitList: {
    deep: true,
    handler(newValue) {
      // 将变化后的newValue存入本地 (转JSON)
      localStorage.setItem('list', JSON.stringify(newValue));
    }
  }
}

 接收本地存储数据并转为对象去使用，当字符串为空时，使用原始数据defaultArr字符串

data: {
    // 水果列表
    // 将数据持久化本地，当list被清除显示默认list
    fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,
      },

defaultArr字符串：

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,
  },
]

实现效果：