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>
複製程式碼