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>