Vuex 맵 상태가 정의되지 않음 상태

Vuex 맵 상태가 정의되지 않음 상태

검색 쿼리로 통과하기 위해 내 상태를 사용하려고 하는데 지도 상태를 사용하여 상태를 풀다운하면 '정의되지 않음'이 반환됩니다.이런 문제는 처음이에요.

코드는 다음과 같습니다.

import Vue from 'vue'
import Hero from '../components/Hero/Hero'
import PopularDest from '../components/PopularDest/PopularDest'

import { mapActions, mapState } from 'vuex'

export default Vue.extend({
template: `
    <div class="page--sport">
        <hero :action="getSportData" page="sport" title="Sport Events"></hero>
        <div class="page--sport__bottom">
            <h2>Popular Sport Events</h2>
            <popular-dest></popular-dest>
        </div>
    </div>
`,
data () {
    return {
        searchQuery: {
            query: [(this as any).searchInput],
            genre: 'sport'
        }
    }
},
updated () {
   console.log(this.searchInput)
},  
components: {
    Hero,
    PopularDest
},
methods: {
    getSportData (): void {
        [(this as any ).getEventData(this.searchQuery)]
    },
    ...mapActions([
        'getEventData'
    ])
},
computed: {
    ...mapState([
        'searchInput'
    ])
}
})

저는 이 프로젝트에서 Vuex 모듈을 처음 사용하고 있습니다.그것만이 문제의 유일한 지표인 것 같습니다.

모듈 기반 스토어 구조를 사용하는 경우 mapState 내부 모듈 상태에 직접 액세스할 수 없습니다.예를 들어, 다음과 같이 합니다.this.$store.state.searchInput얻을 수 있을 것이다undefined하지만 당신이 한다면this.$store.state.yourModuleName.searchInput특정 모듈의 상태 내에서 실제 값을 얻을 수 있습니다.

이 문제를 해결하려면 다음 두 가지 방법이 있습니다.

1. mapState 내의 속성 기반 접근

...mapState({
    searchInput: state => state.yourModuleName.searchInput,
  })

2. 모듈의 네임스페이스 사용

..........
modules: {
yourModuleName: {
  namespaced: true,
.........

/* Using the namespace in mapState */
...mapState('yourModuleName',[
  'searchInput',
])

Vuex의 github 페이지에 이 건에 관한 미해결 문제가 있습니다.https://github.com/vuejs/vuex/issues/459

언급URL : https://stackoverflow.com/questions/49051249/vuex-map-state-undefined-state