【小兔鲜电商前台 | 项目笔记】第八天

前言：小兔鲜电商前台项目是一个基于Vue的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学Vue或想从零搭建一个前端项目，希望本系列文章可以帮助到你。

【小兔鲜电商前台 | 项目笔记】第八天

- 今日完结：
- 今日收获：
- - [1.本地添加 | 删除商品](#1.本地添加 | 删除商品)
  - [2.通过计算属性算出商品的总数 | 总价](#2.通过计算属性算出商品的总数 | 总价)
  - [3.购物车单选 | 全选功能](#3.购物车单选 | 全选功能)
  - 4.额外传自定义参数
- 总结：

今日完结：

本地加入购物车实现
本地 - 头部购物车列表渲染
本地 - 头部购物车删除实现
本地 - 头部购物车统计计算
本地 - 列表购物车数据渲染
本地 - 列表购物车单选功能实现
本地 - 列表购物车全选功能实现
本地 - 列表购物车统计数据实现

今日收获：

1.本地添加 | 删除商品

添加商品：

javascript 复制代码

 const addCart = async (goods) => {
  
     // 添加购物车操作
    // 已添加过 - count + 1
    // 没有添加过 - 直接push
    // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
    const item = cartList.value.find((item) => goods.skuId === item.skuId)
    if (item) {
      // 找到了
      item.count++
    } else {
      // 没找到
      cartList.value.push(goods)
    }
  
}

删除商品：

javascript 复制代码

const delCart = async (skuId) => {
        // 思路：
      // 1. 找到要删除项的下标值 - splice
      // 2. 使用数组的过滤方法 - filter
      const idx = cartList.value.findIndex((item) => skuId === item.skuId)
      cartList.value.splice(idx, 1)
   }

2.通过计算属性算出商品的总数 | 总价

javascript 复制代码

const allCount = computed(() => cartList.value.reduce((a,c) => a+c.count,0))
const allPrice = computed(() => cartList.value.reduce((a,c) => a+c.count*c.price,0))

3.购物车单选 | 全选功能

单选

javascript 复制代码

<script setup>

const singleCheck = (i,selected) => {
    
    cartStore.singleCheck(i.skuId,selected)
}

</script>
<el-checkbox :model-value="i.selected" @change="(selected)=>singleCheck(i,selected)"/>

javascript 复制代码

// 单选功能
  const singleCheck = (skuId, selected) => {
  // 通过skuId找到要修改的那一项 然后把它的selected修改为传过来的selected
  const item = cartList.value.find((item) => item.skuId === skuId)
  item.selected = selected
}

全选

javascript 复制代码

<script setup>

const allCheck = (selected) => {
     cartStore.allCheck(selected)
}
</script>

 <el-checkbox :model-value="cartStore.isAll" @change="allCheck"/>

javascript 复制代码

// 是否全选计算属性
const isAll = computed(() => cartList.value.every((item) => item.selected))

// 全选功能action
const allCheck = (selected) => {
  // 把cartList中的每一项的selected都设置为当前的全选框状态
  cartList.value.forEach(item => item.selected = selected)
}

4.额外传自定义参数

原生 @change 自带的参数默认只能拿到一个值：是否选中（true/false）

javascript 复制代码

// 默认写法，只能拿到选中状态，拿不到当前行数据 i
@change="singleCheck"

想要传递自定义参数，我们可以用箭头函数包裹

javascript 复制代码

 @change="(selected)=>singleCheck(i,selected)"

总结：

今天学到了日常项目很常见的增，删操作，以及总结商品的数量和总价。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！