vuex-----查看未完成的item条数

getters作用：包装器，不会修改state原数据，对state元数据进行包装处理，将结果返回

1、vuex添加 getters和actions同级

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

2、其他组件的使用

import {  mapGetters } from 'vuex'

 // 计算属性
  computed: {
    ...mapGetters(['unDoneLength'])
  }


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