Vuex之getter

Vuex提供给我们一个Getter方法，主要就是为了在数据派生一些状态，简单来说就是想要通过判断进行过滤。

比如有这样一个应用场景，我们有一个考试得分的数组，我们需要在很多页面使用，但是只显示不及格的，那么我们每个页面都要这样：

computed: { scoreArr(){ return this.$store.state.score.filter(item => item < 60) }},

或者：

computed: mapState({ score(state){ return state.score.filter(item => item < 60) }}),

反正要是很多地方用到，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，不是很理想，所以vuex提供了getter方法，在getters.js里面：

export default { scoreGetter (state){ return state.score.filter(item => item < 60) }}

然后就可以通过store.getters.scoreGetter去调用：

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

getters也可以返回函数：

scoreGetter: (state) => { return (num) => { return state.score.filter(item => item < num) }}

调用：

computed: { scoreGetter(){ return this.$store.getters.scoreGetter(90) }},

相应的getter也有一个辅助函数mapGetters ：

引入：

import { mapGetters } from 'vuex'

数组：

computed: { ...mapGetters([ 'scoreGetter', ])},

可以重命名，使用对象：

computed: { ...mapGetters({ newScore: 'scoreGetter' } )},

标签使用：

{{scoreGetter(90)}}

{{newScore(90)}}

方法里面使用：

this.scoreGetter(60)

this. newScore (60)

欢迎关注Coding个人笔记 公众号