Vuex 的项目实例11 列表数据的按需切换

如果要实现列表数据的按需切换，就需要用到 getters ，可以将数据源包装，按需来展示，并不会修改数据源。

1、定义 getters 

getters: {
    // 列表数据
    infoList(state) {
      if (state.viewKey === 'undone') {
        return state.list.filter(item => !item.done)
      } else if (state.viewKey === 'done') {
        return state.list.filter(item => item.done)
      } else {
        return state.list
      }
    }
  }

2、用 infoLIst 替换 list 成为数据源：

<a-list bordered :dataSource="infoList" class="dt_list">

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  // 计算属性
  computed: {
    ...mapGetters(['unDoneLength', 'infoList'])
  }
}
</script>

此时，功能已经完成实现。