pinia 3

Getters (개터)

Getter는 Store의 state에 대한 계산형 값과 정확히 동일합니다. defineStore()의 getters 프로퍼티를 사용하여 정의할 수 있습니다. 화살표 함수를 사용하는 것을 권장하며, state를 첫 번째 매개변수로 받습니다:

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})

대부분의 경우, getter는 오직 state에만 의존하지만, 다른 getter를 사용해야 할 수도 있습니다.
이 때문에 일반 함수를 정의할 때, this를 통해 전체 Store 인스턴스에 접근할 수 있지만, (TypeScript에서) 반환 타입을 정의해야 합니다. 이는 TypeScript의 알려진 제한 사항 때문이며, 화살표 함수로 정의된 getter나 this를 사용하지 않는 getter에 영향을 미치지 않습니다:

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // 자동으로 반환 타입을 숫자로 추론합니다.
    doubleCount(state) {
      return state.count * 2
    },
    // 반환 타입을 **명시적으로** 설정해야 합니다.
    doublePlusOne(): number {
      // 전체 Store에 대한 자동 완성 및 타입 설정 ✨
      return this.doubleCount + 1
    },
  },
})

그런 다음 Store 인스턴스에서 getter에 직접 접근할 수 있습니다:

<script setup>
const store = useCounterStore()
</script>

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

---

다른 getter에 접근하기

계산형 프로퍼티와 마찬가지로 여러 getter를 결합할 수 있습니다. this를 통해 다른 getter에 접근할 수 있습니다. 이 경우, 이 getter에 대해 반환 타입을 지정해야 합니다.

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // `this`를 사용하지 않기 때문에 타입은 자동으로 추론됩니다.
    doubleCount: (state) => state.count * 2,
    
    // 여기서는 타입을 직접 추가해야 합니다 (JS에서 JSDoc 사용).
    // 이를 통해 getter를 문서화할 수도 있습니다.
    /**
     * count 값을 2배로 한 후 1을 더한 값을 반환합니다.
     *
     * @returns {number}
     */
    doubleCountPlusOne() {
      // 자동완성 ✨
      return this.doubleCount + 1
    },
  },
})

getter에 인자 전달하기

Getter는 단지 내부적으로 계산형 프로퍼티일 뿐이므로, 매개변수를 전달할 수 없습니다.
그러나 getter에서 함수를 반환하여 임의의 매개변수를 받을 수 있습니다:

export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

<script setup>
const userList = useUserListStore()
const { getUserById } = storeToRefs(userList)
// `<script setup>`에서 함수에 접근하려면 `getUserById.value`를 사용해야 합니다.
</script>

<template>
  <p>User 2: {{ getUserById(2) }}</p>
</template>

이렇게 하면 getter는 더 이상 캐시되지 않습니다. 단지 호출되는 함수일 뿐입니다.
하지만 getter 자체 내에서 일부 결과를 캐시할 수 있으며, 이는 일반적이지 않지만 성능 향상에 도움이 됩니다:

export const useStore = defineStore('main', {
  getters: {
    getActiveUserById(state) {
      const activeUsers = state.users.filter((user) => user.active)
      return (userId) => activeUsers.find((user) => user.id === userId)
    },
  },
})

다른 Store의 getter에 접근하기

다른 Store의 getter를 사용하려면, getter 내부에서 직접 사용할 수 있습니다:

import { useOtherStore } from './other-store'

export const useStore = defineStore('main', {
  state: () => ({
    // ...
  }),
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    },
  },
})

setup()에서 사용하기

Store의 프로퍼티로 모든 getter에 직접 접근할 수 있습니다(마치 state 프로퍼티처럼):

<script setup>
const store = useCounterStore()

store.count = 3
store.doubleCount // 6
</script>