今天要介紹的Getter,我們其實可以把它想像成Vue中的computed屬性。OK,那我們就開始吧!
使用時機:
昨天我們介紹到 state
是存放元件共同維護的資料,而今天假設我們要對資料進行運算、過濾,過去我們在 Vue
中很直覺就會想到要用 computed
。但在不同元件間,這些過濾資料能否跟 state
一樣,一起被共享維護呢?
答案是可以的!而這也是Vuex Getter存在的目的!這時我們來看官網提供的範例,就能清楚了解到getter
的方便地方勒~
Javascript部分程式碼
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
我們可以發現,上面範例是透過 computed
取得 store
中 todo
的相關資料,這時候我們假設我們有多個元件需要用到此屬性,是否就要重複撰寫呢?(有點蠢)
所以這就要用到 Getter
來幫助我們解決這問題!
Javascript部分程式碼
//創建一個store
const store = new Vuex.Store({
state: {
todos: [
{ id: 1,
text: 'hello',
done: true
},
{ id: 2,
text: 'hello2',
done: false
}
]
},
getters: {
doneTodos: state => { //state 作為第一個參數
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {//getters 可以作為第二個參數
return getters.doneTodos.length
},
}
})
我們在元件中即可以下面方式來取得 doneTodos :
//第一個參數
computed: {
doneTodos() {
return this.$store.getters.doneTodos;
},
}
// [ { "id": 1, "text": "hello", "done": true } ]
//第二個參數
computed: {
doneTodosCount() {
return this.$store.getters.doneTodosCount
},
}
// 1
我們也可以傳參數到 getters 來取得返回結果,這是非常便利的方式查詢 store 中的陣列。
Javascript部分程式碼
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'hello', done: true },
{ id: 2, text: 'hello2', done: false }
]
},
getters: {
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
})
computed: {
getTodoById() {
return this.$store.getters.getTodoById(2);
}
}
// { "id": 2, "text": "hello2", "done": false }
mapGetters 與 mapState 用法相近
<template>
<div>
<div>{{doneTodos}}</div>
<div>{{doneTodosCount}}</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
mapGetters([
'doneTodos',
'doneTodosCount',
]),
},
};
</script>