vue vuex getter使用
getter的使用Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。store.jsGetter 接受 state 作为其第一个参数:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vue
·
getter的使用
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
store.js
Getter 接受 state 作为其第一个参数:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 0,
name: '刘旭',
age: 22,
getters: '用使的retteg是这'
},
// 就是公共的计算属性
getters: {
getterMsg: function(state) {
return state.getters.split('').reverse().join('')
}
},
mutations: {
numAdd(state) {
state.num += 2
},
setNum(state, value) {
state.num = value
}
},
actions: {
},
modules: {
}
})
getter.vue
通过属性访问
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:
this.$store.getters.getterMsg
<template>
<div class="getter">
<h2>{{gettersMsg}}</h2>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'getter',
computed: {
gettersMsg:function(){
return this.$store.getters.getterMsg
},
...mapState(['name','age'])
},
}
</script>
辅助函数(mapGetter)
<template>
<div class="getter">
<h2>{{gettersMsg}}</h2>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<h2>mapGetters之数组形式{{mapGetters}}</h2>
<h2>mapGetters之对象形式{{liuxu}}</h2>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
name: 'getter',
computed: {
gettersMsg:function(){
return this.$store.getters.getterMsg
},
...mapState(['name','age']),
// 辅助函数mapGetters,可以数组形式,可以对象形式
...mapGetters(['getterMsg','mapGetters']),
...mapGetters({
liuxu: 'mapGetters'
})
},
// computed: mapGetters(['mapGetters']),
// computed: mapGetters({liuxu: 'mapGetters'}),
}
</script>
上面代码中,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
mapGetters 辅助函数可以是数组形式:
// 解构赋值
...mapGetters(['getterMsg','mapGetters']),
// 或者
computed: mapGetter(['mapGetters'])
如果我们想将一个getter属性重新命名,就可以使用对象的形式
// 解构赋值
...mapGetters({
liuxu: 'mapGetters'
})
// 或者
computed: mapGetter({liuxu: 'mapGetters'})
点击GitHub地址查看完整代码
更多推荐
已为社区贡献2条内容
所有评论(0)