Vue实战商城项目（十四）—— 合计与全选

---

前言

本章概述：购物车商品价格合计，购物车商品选中与全选。

---

一、购物车商品价格合计

样式与数据渲染与前面的方法大同小异，这里不再细说，我们直接讲商品价格合计这里的代码应该怎么写。

我们从cartList数组中返回item.checked为true的项，即我们选中的项，用reduce函数将选中的数全部加起来，还要注意商品的价格乘于对应的数量才能得到正确的结果，结果保留两位小数

          //合计
        totalprice(){
          return this.$store.state.cartList.filter(item=>{
            return item.checked
          }).reduce((preValue,item) =>{
            return preValue + item.price *item.count
          },0).toFixed(2)
        }

这里返回选中商品的长度

//总数
        calulate(){
          return this.$store.state.cartList.filter(item => item.checked).length
        },

二、购物车商品选中与全选

1.判断是否全部选中

代码如下（示例）：

        isSelectAll(){
          //如果长度等于0 则返回false
          if(this.$store.state.cartList.length === 0 ){ return false}

          //调用数据的find方法，只要数组中有一个的checked为false 通过取反 find就直接返回true isSelectAll就返回false
          return !this.$store.state.cartList.find(item => !item.checked)
        }

2.全选按钮对应的点击事件

代码如下（示例）：

        // 将isSelectAll的结果传入checkAll函数中，只要有一个没选中，则让全部选中，如果全部选中，则让全部为不选中
        checkAll(isSelectAll){

           this.$store.state.cartList.forEach(item => item.checked = !isSelectAll)
           
        }

---

总结

Vue商城项目的重难点基本就是这些，还有一些小细节的东西没有全面展示，还有一些相对基础的知识点也没有展示，如果需要更详细的讲解还请回到首篇文章中点击视频链接学习。后续可能还会更新一些关于项目优化的一些文章，再后续的计划是更新有关ES6语法的文章。