Vuex 的项目实例8 统计未完成事项

时间：2020-05-11 14:48:16 阅读：42 评论：0 收藏：0 [点我收藏+]

使用 getters 包装器

1、定义 getters 函数：

getters: {
    // 统计未完成任务的条数
    unDoneLength(state) {
      return state.list.filter(item => item.done === false).length
    }
  }

2、引入 getters

import { mapState, mapGetters } from ‘vuex‘
export default {
  // 计算属性
  computed: {
    ...mapGetters([‘unDoneLength‘])
  }
}

3、修改页面代码：

<!--未完成的任务个数-->
<span>{{unDoneLength}}条剩余</span>

效果图：

技术分享图片

此时点击每项的复选框，下面未完成条数会跟着随之动态变化。

原文：https://www.cnblogs.com/joe235/p/12742895.html

踩

(0)

评论一句话评论（0）

分享档案

更多>