pinia (3) getter 建立

發表於 更新於
建立 getter

什麼是 getter

getter 就和 vue 裡的 computed 一樣，會根據state的資料，產生一筆新的資料。

1
2
3
4
5
6
7
8
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})

如上， doubleCount 依據 state.count 回傳2倍數值的資料。

依賴其他 getter

當要根據其他 getter 來產生資料時，可以使用 this 來指向整個物件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.count * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store ✨
      return this.doubleCount + 1
    },
  },
})