vuex学习四----getters

1：有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并且计数；

computed:{
 doneTodosCount(){
  return   this.$store.state.todos.filter(todo=>todo.done).length
 }
}

如果有多个组件需要用的这个属性，我们要么复制这个函数；或者抽取到一个共享函数然后再多出导入它；这2种方式都不理想
2：VUEX允许我们在store中定义getters，getters接受state作为他的第一个参数；

const store=new Vuex.Store({
 state:{
     todos:[
        {id:1, text:'...', done:true},
        {id:2, text:'...', done:false}
    ]   
    },
 getters:{
     doneTodos: state=>{
        return state.todos.filter(todo=>todo.done)
    }
    }
})

Getters会暴露为store.getters的对象

store.getters.doneTodos

Getters也可以接受其他getters最为第二个参数：

getters:{
    doneTodosCount:(state,getters)=>{
        return getters.doneTodos.length;
    }
}

我们可以很容易的在任何组建中使用它：

computed:{
    doneTodosCount(){
        return this.$store.getters.doneTodosCount
    }
}

3：mapGetters辅助函数
mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性

import { mapGetters } from 'vuex'
export default{
    computed:{
    //使用对象展开运算符将getters混入computed对象中
        ...mapGetters({
        'doneTodosCount',
        'anotherGetters'
        })
    }
}

如果你想讲一个getters属性另外娶一个名字，使用对象的形式：

mapgetters({
    //映射this.doneCount为store.getters.doneTodosCount
    doneCount:'doneTodosCount'
})