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>

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

posted on 2020-05-13 10:40  JoeYoung  阅读(328)  评论(0编辑  收藏  举报