Vuex 게터에서 구성 요소 소품을 사용하는 올바른 방법은 무엇입니까?

Vuex 게터에서 구성 요소 소품을 사용하는 올바른 방법은 무엇입니까?

vuex 스토어를 사용하여 카운터 구성 요소에서 여러 카운터를 추가하는 버튼이 있는 단순한 애플리케이션 구성 요소가 있다고 가정합니다.

여기 웹팩빈에 있는 모든 것이 있습니다.

vuex git repo의 기본 카운터 예시와 약간 비슷합니다.그러나 컴포넌트의 속성을 통해 전달되는 ID로 vuex getter를 사용하려는 경우 어떻게 하시겠습니까?

getter는 순수한 기능이어야 하기 때문에 사용할 수 없습니다.this.counterId공식 문서에서는 계산된 자산을 사용해야 한다고 하지만 그것도 효과가 없는 것 같습니다.이 코드는 getter에 대해 정의되지 않은 것을 반환합니다.

import * as actions from './actions'

export default {
    props: ['counterId'],
    vuex: {
        getters: {
            count: state => state.counters[getId]
        },
        actions: actions
    },
    computed: {
        getId() { return this.counterId }
    },
}

getter는 순수한 함수여야 하며 구성요소 상태에 의존해서는 안 됩니다.

Getter에서 계산된 소품을 포장하거나 스토어를 직접 사용할 수 있습니다.

//option A
export default {
    props: ['counterId'],
    vuex: {
        getters: {
            counters: state => state.counters
        },
        actions: actions
    },
    computed: {
        currentCounter() { return this.counters[this.counterId] }
    },
}

//option B (better suited for this simple scenario)
import store from '../store'
computed: {
  currentCounter() {  
    return store.state.counters[this.counterId] 
  }
}

언급URL : https://stackoverflow.com/questions/38437992/what-is-the-correct-way-to-use-component-props-in-a-vuex-getter