Vuex Getter에 인수를 전달하는 방법

Vue JS로 보다 체계적인 상태 관리를 하기 위해 Vuex를 사용합니다.

Vuex 속성이 있는 Getter는 함수처럼 작성되지만 계산된 속성처럼 작동합니다.

때때로; Vuex에서 게터를 사용할 때 경우에 따라 게터에 일부 인수를 보낼 수 있습니다.

이를 위해 vuex에서 제공하는 "Method-Style Access"방법을 사용할 수 있습니다.

이 방법을 사용하여 getter를 다음과 같이 정의해야 합니다.

정의:

getterName: (state) => (parameter) => { // get the parameter
    return state.data.find(item => item.id === parameter)
}

이 정의 방법을 사용하여 정의한 게터에 인수를 보낼 수 있습니다.

용법:

store.getters.getterName(2); // we sent 2 as getter parameter

그러나 때로는 "mapGetters"도우미를 사용하여 게터를 포함할 수 있습니다.
이 경우 다른 메서드를 사용하여 게터에 인수를 보내야 합니다.

mapGetters에 포함된 getter에 인수 보내기

동일한 메서드로 getter를 정의한 후 "mapGetters"를 사용하여 구성 요소에 포함합니다.

mapGetters에 포함된 getter에 인수를 보내려면; 새로운 계산 속성을 정의해야 합니다.

이 새로운 계산 속성은 함수처럼 매개변수를 사용합니다. 이 매개 변수를 mapGetters와 함께 제공되는 getter에 대한 인수로 보내고 이 값을 반환합니다.

import { mapGetters } from 'vuex';

  computed: {

    // import the getters with mapGetters
    ...mapGetters([
      'getterName',
    ]),

    //Define New Computed Property
    newGetter(parameter){ // get the parameter
      return this.getterName(parameter) // return the value
    }

  }

따라서 newGetter라는 getter에 보내는 인수는 mapGetters에 포함된 getter로 보내집니다.

메서드 스타일 액세스:
https://vuex.vuejs.org/guide/getters.html#method-style-access