侦听综合运用

购物车

.全选

.部分选择

.结算

.仓库数据 cartStore，其中 cart 是购物车数据；数组

.选中数据 selectedGoods；数组

.是否全选 isSelectAll，布尔；默认是真，全选

.商品价格总数 sum

.商品数量总数 count

const cartStore = useCartStore()
const selectedGoods = ref([...cartStore.cart])
const isSelectAll = ref(true)
const sum = ref(0)
const count = ref(0)
let flag = true

.使用 fetch 或 axios

.非必要

.分别为增、减按钮绑定事件：增加数量 inc(item) 和减少数量 dec(item)，并使用当前商品为形参，修改其数量 number

.注意越界检测

.可以使用内联事件方式

<button class="btn dec" @click="item.quantity--">-</button>

.使用函数方式 - 这里使用库存限制*

const inc = (item) => {
  if (item.quantity < item.stock) {
    item.quantity++
  }
}

const dec = (item) => {
  if (item.quantity > 1) {
    item.quantity--
  }
}

.选择列表商品的数量的变化，更新总价；使用函数返回方式

.深度侦听：数量是对象的一个属性

.立即侦听：页面渲染完毕也应该结算异常

watch(selectedGoods, (newVal) => {
  sum.value = selectedGoods.value.reduce((total, item) => total + item.price * item.quantity, 0)
}, { deep: true, immediate: true })

.当选中商品的种类数量等于待选商品种类的数量时，应为全选；修改上述逻辑

watch(selectedGoods, () => {
  // select all
  if (selectedGoods.value.length === cartStore.cart.length) {
    isSelectAll.value = true
  } else {
    isSelectAll.value = false
  }
  // count sum
  sum.value = selectedGoods.value.reduce((total, item) => total + item.price * item.quantity, 0)
}, { deep: true, immediate: true })      

.引入 flag 辅助判断；默认是真；初值也可以为假，后面的逻辑判断相应调整即可

.侦听购物车数据 cartData 中的全选 selectedAll；使用函数返回方式

.只有 flag 为真时，才真正置空购物车数据；利用 flag 保留选中的部分数据

watch(() => cartData.selectedAll, (newVal) => {
  if (newVal) {
    cartData.selectedLists = [...cartData.lists]
  } else {
    if (flag) cartData.selectedLists = []
  }
})

.侦听购物车数据 cartData 商品选中列表 selectedLists；使用函数返回方式

.如果选中列表长度和商品列表长度相等，则全选为真，同时置 flag 为真；否则全为假

watch(() => cartData.selectedLists, (newVal) => {
  if (newVal.length == cartData.lists.length && cartData.lists.length) {
    cartData.selectedAll = true
    flag = true
  } else {
    cartData.selectedAll = false
    flag = false
  }
})

现场验收、课后提交实验报告