vuex中getters 的基本用法
一、getter 定义Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作。就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算二、使用方法1、通过属性访问Getter 接受 state 作为其第一个参数:example:现在需要获取list:[1,2,3,4,5,6,7,8
·
一、getter 定义
- Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作。
- 就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
二、使用方法
1、通过属性访问
- Getter 接受 state 作为其第一个参数:
example:现在需要获取list:[1,2,3,4,5,6,7,8,9]中大于5的元素
const store = new Vuex.Store({
state:{
list: [1,2,3,4,5,6,7,8,9]
} ,
getters: {
getNumber: state => {
retrun state.list.filter(item => item > 5)
}
}
})
在.vue中使用
computed:{
getNumber(){
return this.$store.getters.getNumber
}
}
2、通过方法访问
- 同样的数组list 需要根据不同的条件返回不同的数据
- 通过让 getter 返回一个函数,来实现给 getter 传参
const store = new Vuex.Store({
state:{
list: [1,2,3,4,5,6,7,8,9]
} ,
getters: {
getNumber: state => (index) => {
return state.list.filter(item => item > index)
}
}
})
在.vue中使用
computed:{
getNumber(){
return this.$store.getters.getNumber(4)
}
}
3、依赖于已存在的getters
example: 获取list中大于5的数字的个数
注意:如果getters返回的是一个方法,不能用这种方式
const store = new Vuex.Store({
state:{
list: [1,2,3,4,5,6,7,8,9]
} ,
getters: {
getNumber: state => {
return state.list.filter(item => item > 6)
},
getNumberLength: (state, getters) = > {
return getters.getNumber.length
}
}
})
三、mapGetters辅助函数
- mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
如果你想将一个 getter 属性另取一个名字,使用对象形式:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
}
}
四、getters注意事项
- 1、data中定义的属性名称不能和computed中定义的getter名称相同,否则会报错
- 2、vuex中state和getter中可以定义同名属性,互不干扰
更多推荐
已为社区贡献5条内容
所有评论(0)