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>
此时,功能已经完成实现。