getter方法的作用 vuex_[Vuex系列] - Vuex中的getter的用法

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

getters的作用

对于getters的理解主要作用是对state属性进行计算，可以理解类似于Vue中computed。接下来让我通过一个例子如何使用这两个功能的。

还是以我们上一讲的累加器为例，在getter.js中增加getCount，内容如下：

const getters = {

getNum (state) {

return state.num

},

getCount (state) {

return state.count

}

}

export default getters

在组件中如何使用

{{ count }}

ADD State

export default {

data () {

return {}

},

computed: {

count () {

return this.$store.getters.getCount

}

},

methods: {

add () {

this.$store.commit('add')

}

}

}

this.$store调用

this.$store.getters.getCount

引用store来调用

import store from '@/store/store.js'

store.getters.getCount

mapGetters 辅助函数

{{ getCount }}

ADD State

import { mapGetters } from 'vuex'

export default {

data () {

return {}

},

computed: {

...mapGetters(['getCount'])

},

methods: {

add () {

this.$store.commit('add')

}

}

}