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

Question

vuex 저장소를 사용하여 카운터 구성 요소에서 여러 카운터를 추가하는 버튼이있는 간단한 앱 구성 요소가 있다고 가정합니다.

Here is the whole thing on webpackbin.

당신이 구성 요소의 속성을 통해 넘겨되는 ID로 vuex 게터를 사용하려면 나누었다 vuex git repo에서 기본 카운터 예를 들어 같은 비트, 당신은 어떻게 할 것인가?

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 } 
    }, 
} 

Answer 1

게터는 순수한 함수 여야하며 구성 요소 상태에 의존하지 않아야합니다.

당신은 여전히 ​​상자는 계산 된 게터에서 소품, 직접 가게를 사용할 수 있습니다

//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] 
    } 
}