Vuex學習筆記（四）——getters

Vuex中的getter，可以認爲是store的計算屬性。就跟計算屬性一樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的以來至發生了改變纔會被重新計算。

我們來看一個例子：

// 先創建一個store
const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false },
            { id: 3, text: '...', done: true },
            { id: 4, text: '...', done: true },
            { id: 5, text: '...', done: true },
            { id: 6, text: '...', done: false }
        ]
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    /*
    	vuex允許我們在store中定義getter，這個可以認爲是store的計算屬性。
        getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被重新計算
        Getter接受state作爲其第一個參數
        filter返回符合條件的新數組
    */
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        // Getter也可以接受其他getter作爲第二個參數
        doneTodoCounts: (state, getters) => {
            return getters.doneTodos.length
        },
        // 也可以返回一個函數，來實現給getter傳參。在對store裏的數組查詢時非常有用。
        getTodoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id);
        }
    }
})

// 創建一個Vue實例
const vm = new Vue({
    el: "#app",
    store,
    template: `
            <div>
            <div>{{ doneTodoCount }}</div>
            <p v-for="(item, index) of doneTodoGetter" :key="index">{{item.id}}</p>
            <p>{{ getTodo }}</p>
            </div>
	`,
    computed: {
        // 如果有多個組件需要用到此屬性，我們要麼複製這個函數，或者抽取到一個共享函數然後在多處導入它無論哪種方式都不是很理想。
        doneTodoCount() {
            // 獲取集合中key值爲done的長度
            // return this.$store.state.todos.filter(todo => todo.done).length
            return this.$store.getters.doneTodoCounts
        },

        // getter會暴露爲store.getters對象，你可以以屬性的形式訪問這些值：
        // store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
        doneTodoGetter() {
            return this.$store.getters.doneTodos
        },
        getTodo() {
            return this.$store.getters.getTodoById(2)
        }
    },
})