>[success] getter是Vuex中的計算屬性
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
##
Getter 接受 state 作為其第一個參數：
~~~
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: { //本質是對象的get函數
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
~~~
## 訪問計算屬性的值
1.通過屬性訪問
~~~
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
~~~
Getter 也可以接受其他 getter 作為第二個參數：
~~~
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
~~~
~~~
store.getters.doneTodosCount // -> 1
~~~
在組件中使用它：
~~~
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
~~~
注意，getter 在通過屬性訪問時是作為 Vue 的響應式系統的一部分緩存其中的。
2.通過方法訪問
你也可以通過讓 getter 返回一個函數，來實現給 getter 傳參。在你對 store 里的數組進行查詢時非常有用。
~~~
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
~~~
~~~
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
~~~
注意，getter 在通過方法訪問時，每次都會去進行調用，而不會緩存結果。
3.`mapGetters`輔助函數
`mapGetters`輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：
~~~
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
~~~
如果你想將一個 getter 屬性另取一個名字，使用對象形式：
~~~
mapGetters({
// 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
~~~
