Getters 和 mapGetters

this.$store.getters.doneTodos

直接拿到已完成的待辦清單。

---

• 1. getters 是什麼？

getters 是 Vuex store 中的「計算屬性（computed）」。

它讓你從 state 派生出新的資料，比如過濾列表、計算總數、格式化資料等。

定義在 store 裡，回傳值可以直接在元件中拿來用。

範例

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  }
});

getters

Vuex store 裡用來定義「計算屬性」的區塊。

doneTodos(state)

這是定義的一個 getter 函式，名字叫 doneTodos，會收到 Vuex 的 state 當作參數。

return state.todos.filter(todo => todo.done)

從 state 裡的 todos 陣列中，篩選出 done 屬性為 true 的項目，也就是「完成的待辦事項」。

• 2. mapGetters 是什麼？

mapGetters 是 Vuex 提供的輔助函式，用來把 store 中的 getters 映射到元件的 computed 屬性。

這樣你可以直接在元件中用 this.doneTodos 讀取，無須手動寫 computed。

用法

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doneTodos'])
  }
};