반응형
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
반응형
'source' 카테고리의 다른 글
제출할 때만 텍스트 필드 확인 (0) | 2022.09.01 |
---|---|
nuxtj에 스크립트 태그를 쉽게 추가 (0) | 2022.09.01 |
Vue가 정의되지 않은 이유는 무엇입니까? (0) | 2022.09.01 |
Java의 두 개체를 가능한 null 값과 비교합니다. (0) | 2022.09.01 |
'\0'은 false, '\0'은 true로 평가됩니다. (0) | 2022.09.01 |