Vuex中的Getters
一、 使用场景
- 有时候,我们需要从store中获取(派生)一些state变异后的状态,比如下面的Store中:
- 问题:获取学生年龄大于20的个数。
const store = new Vuex.Store({
state: {
counter: 1000,
students: [
{id: 110, name: 'cyz', age: 18},
{id: 111, name: 'kobe', age: 23},
{id: 112, name: 'james', age: 30},
{id: 113, name: 'curry', age: 10}
]
}
})
- 可以使用计算属性:利用
filter()
函数过滤数据
computed: {
more20stu() {
return this.$store.state.students.filter(s => s.age > 20)
}
}
- 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
二、Getters的基本使用
- Vuex 允许我们在
store
中定义“getter”
(可以认为是 store
的计算属性)。就像计算属性一样,getter
的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。 - Getter 接受
state
作为其第一个参数:
const store = new Vuex.Store({
state: {
counter: 1000,
students: [
{id: 110, name: 'cyz', age: 18},
{id: 111, name: 'kobe', age: 23},
{id: 112, name: 'james', age: 30},
{id: 113, name: 'curry', age: 10}
]
},
getters: {
more20stu(state) {
return state.students.filter(s => s.age > 20)
}
}
})
三、Getters通过属性和方法访问(作为参数、传递参数)
- 通过属性访问
Getter
会暴露为 store.getters
对象,你可以以属性的形式访问这些值:
Getter
也可以接受其他 getter
作为第二个参数:- 如果我们已经有了一个获取所有年龄大于20岁学生列表的getters, 那么我们可以通过属性访问其他
getters
,比如年龄大于20岁的学生个数
const store = new Vuex.Store({
state: {
counter: 1000,
students: [
{id: 110, name: 'cyz', age: 18},
{id: 111, name: 'kobe', age: 23},
{id: 112, name: 'james', age: 30},
{id: 113, name: 'curry', age: 10}
]
},
getters: {
more20stu(state) {
return state.students.filter(s => s.age > 20)
},
more20stuLength(state, getters) {
return getters.more20stu.length
},
}
})
- 通过方法访问
- 你也可以通过让
getter
返回一个函数,来实现给 getter
传参。在你对 store
里的数组进行查询时非常有用。 - 比如上面的案例中,我们希望根据传入的年龄参数获取学生信息
<h2>{{$store.getters.moreAgestu(20)}}</h2>
const store = new Vuex.Store({
state: {
counter: 1000,
students: [
{id: 110, name: 'cyz', age: 18},
{id: 111, name: 'kobe', age: 23},
{id: 112, name: 'james', age: 30},
{id: 113, name: 'curry', age: 10}
]
},
getters: {
more20stu(state) {
return state.students.filter(s => s.age > 20)
},
more20stuLength(state, getters) {
return getters.more20stu.length
},
moreAgestu(state) {
return age => {
return state.students.filter(s => s.age > age)
}
}
}
})