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在组件中如何使用
<template>
<div class="getter">
{{ count }}
<button @click="add">ADD State</button>
</div>
</template> <script>
export default {
data () {
return {}
},
computed: {
count () {
return this.$store.getters.getCount
}
},
methods: {
add () {
this.$store.commit('add')
}
}
}
</script>
this.$store调用
this.$store.getters.getCount
引用store来调用
import store from '@/store/store.js' store.getters.getCount
mapGetters 辅助函数
<template>
<div class="getter">
{{ getCount }}
<button @click="add">ADD State</button>
</div>
</template> <script>
import { mapGetters } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapGetters(['getCount'])
},
methods: {
add () {
this.$store.commit('add')
}
}
}
</script>