getter方法的作用 vuex_vuex Getter

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

computed:{

doneTodosCount(){

return this.$store.state.todos.filter(todo=>todo.done).length

}

}

多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex允许我们在store中定义“getter”(可以认为是store的计算属性)。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生了改变才会被重新计算。

Getter接受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)

}

}

})

Getter会暴露为store.getters对象：

store.getters.doneTodos //[{id:1,text:'...',done:true}]

Getter也可以接受其他getter作为第二个参数：

getters:{

//...

doneTodosCount:(state,getters)=>{

return getters.doneTodos.length

}

}

store.getters.doneTodosCount //1

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

computed:{

doneTodosCount(){

return this.$store.getters.doneTodosCount

}

}

你也可以通过让getter返回函数，来实现给getter传参。在你对store里的数组进行查询时非常有用。

getters:{

getTodoById:(state)=>(id)=>{

return state.todos.find(todo=>todo.id===id)

}

}

store.getters.getTodoById(2) //{id:2,text:'...',done:false}

mapGetters辅助函数

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

import {mapGetters} from 'vuex'

export default {

//...

computed:{

//使用对象展开运算符将getter混入computed对象中

...mapGetters([

'doneTodosCount',

'anotherGetter',

//...

])

}

}

如果想将一个getter属性另取一个名字，使用对象形式：

mapGetters({

//映射'this.doneCount'为'store.getters.doneTodosCount'

doneCount:'doneTodosCount'

})