vuex-------任务列表按需切换

因为不需要改变state,所以使用getters

1、 vuex实现：

getters:{

  //切换按钮得到相应的list,list并没有发生变化
 infoList(state){
    if(state.viewKey==='all'){
        return state.list
    }
    if(state.viewKey==='undone'){
        return state.list.filter((x)=>!x.done)
    }
    if(state.viewKey==='done'){
       return state.list.filter((x)=>x.done)
    }
  //防止报错
 return state.list
  }
}

2、组件的使用

import { mapGetters} from  'vuex'

computed:{
   ...mapGetters(['infoList'])
}

<a  :dataSource='infoList' />