搭建一个简单的购物车应用

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！

---

前言

本篇文章详细讲解了如何搭建一个简单的购物车应用，展示了购物车的基本功能，包括商品列表的渲染、商品的删除、数量的修改、全选和反选操作，以及选中商品总价格和总数量的计算。

---

一、渲染功能

在购物车应用中，核心的数据存储在 data 属性中的 fruitList 数组里。每个商品都有如下属性：

• id: 商品唯一标识符
• icon: 商品的图片路径
• isChecked: 商品是否被选中
• num: 商品数量
• price: 商品单价

data: {
   
  // 水果列表
  fruitList: [
    {
   
      id: 1,
      icon: './photos/西瓜.png',
      isChecked: true,
      num: 1,
      price: 10,
    },
    {
   
      id: 2,
      icon: './photos/牛油果.png',
      isChecked: false,
      num: 1,
      price: 8,
    }
}    

通过 v-for 指令遍历 fruitList 中的每个商品，并动态生成表格行。
通过 v-model 的双向数据绑定，用户对商品的选择将直接反映在数据模型中，实现了高效的动态界面更新。

<div class="tbody">
  <div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active : item.isChecked}">
    <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
    <div class="td"><img :src="item.icon" alt="" /></div>
    <div class="td">{
  {item.price}}</div>
    <div class="td">
      ...
    </div>
  </div>
</div>

二、删除功能

用户可以通过点击“删除”按钮从购物车中移除商品。

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

在 del 方法中，使用 filter 方法创建一个不包含被删除商品的新数组，并更新 fruitList，从而移除对应的项目。

三、修改功能

用户可以通过增加或减少商品的数量来更新购物车中的内容。

add(id) {
   
  // 查找对应商品
  const fruit = this.fruitList.find(item => item.id === id);
  // 增加商品数量
  fruit.num++;
},
sub(id) {
   
  const fruit = this.fruitList.find(item => item.id === id);
  if (fruit.num > 1) {
   
    fruit.num--;
  }
}

find 方法会返回数组中第一个满足条件的元素，如果没有找到则返回 undefined。

在 add 方法中，使用 find 方法在 fruitList 数组中查找与传入的 id 匹配的商品，通过 fruit.num++ 将找到的商品的数量 num 增加 1。

在 sub 方法中，在减少数量操作前会先检查商品的数量 num 是否大于 1。只有在数量大于 1 的情况下才会执行 fruit.num--，以防止商品数量变为负值，确保了业务逻辑的正确性。

四、全选反选

购物车允许用户一次性选择或取消选择所有商品。

computed:{
   
  isAll:{
   
    get(){
   
      // 所有小选框被选中，则全选按钮选中
      return this.fruitList.every(item=>item.isChecked===true)
    },
    set(value){
   
    // 基于获取到的布尔值，让所有小选框同步状态
    this.fruitList.forEach(item => item.isChecked=value);
    }
  }
}

every() 方法用于测试一个数组中的所有元素是否都通过给定函数的测试。它返回一个布尔值，表示是否所有元素都满足条件。在 get 方法中，使用 every 检查所有商品的选择状态。

forEach() 方法对数组的每个元素执行一次给定的函数。它不返回结果，仅执行副作用。在 set 方法中，forEach() 被用来同步 fruitList 中每个商品的 isChecked 属性，将 isChecked 属性的值设置为 value，以匹配全选/反选的状态。如果 value 是 true，则表示所有商品将被选中；反之，则表示所有商品将被取消选择。

五、统计价格及数量

购物车可即时计算选中商品的总价和数量。

computed:{
   
  /* 统计选中的总数 → reduce */
  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
      }
    },