computed--实时计算属性

Posted 2020-10-20 ccyinghua

项目：https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/07-shoppingCart.md

实时计算属性的computed功能，实时计算的是属性，只不过是函数的写法，data里面就不用再声明了。computed里面可以放置一些业务逻辑代码，一定记得return。

实例：

实现点击全选功能

<a href="javascipt:;" @click="toggleCheckAll">
    <span class="checkbox-btn item-check-btn" v-bind:class="{\'check\':checkAllFlag}">
        <svg class="icon icon-ok"><use xlink:href="#icon-ok"/></svg>
    </span>
    <span>Select all</span>
</a>

export default {
    data(){
        return {
            checkAllFlag:false // 控制全选
        }
    },
    methods:{
        toggleCheckAll(){ // 全选和取消全选
            this.checkAllFlag = !this.checkAllFlag; // 取反
            this.cartList.forEach((item)=>{
                item.checked = this.checkAllFlag;
            })
            axios.post(\'/users/editCheckAll\',{
                checkAll:this.checkAllFlag
            }).then((response)=>{
                let res = response.data;
                if(res.status==\'0\'){
                    console.log("update suc");
                }
            })
        }
    }
}

在点击select All全选之后，向后端请求，修改所有商品的选中状态，这样页面刷新之后还是这个状态。

但是select All的选择状态并没有存储到数据库中保存，所以页面刷新之后所有商品是选中的，但是select All 并没有选中。

 

【解决办法】 

这里就要用到实时计算的computed功能

export default {
    data(){
        return {
            // checkAllFlag:false // 控制全选
        }
    },
    computed:{ // 实时计算的是属性，只不过是函数的写法，data里面就不用在声明了
        checkAllFlag(){ // 是否全选属性
            return this.checkedCount == this.cartList.length; // 勾选的商品种数=购物车商品列表的商品种数时，返回true代表全选。
        },
        checkedCount(){ // 获取已勾选的商品种数(几种商品已勾选)
            var i = 0;
            this.cartList.forEach((item)=>{
                if(item.checked==\'1\')i++;
            });
            return i;
        }
    },
    methods:{
        toggleCheckAll(){ // 全选和取消全选
            // this.checkAllFlag = !this.checkAllFlag;
            // 不能使用取反这种写法了，checkAllFlag是实时计算的属性，如果true取反变成false之后，
　　　　　　　　　还没来得及执行下面的所有商品取消勾选，就实时计算了检测到勾选的商品种数=购物车商品列表的商品种数,就又变成全选了。
            var flag = !this.checkAllFlag; // 声明变量取代
            this.cartList.forEach((item)=>{
                item.checked = flag ?\'1\':\'0\';
            })
            axios.post(\'/users/editCheckAll\',{
                checkAll:flag
            }).then((response)=>{
                let res = response.data;
                if(res.status==\'0\'){
                    console.log("update suc");
                }
            })
         }
    }
}

这样页面一刷新就实时计算了，如果勾选的商品总数=购物车商品列表的商品总数，全选属性checkAllFlag为true，select All就自动勾选了。