Javascript 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'
    ])
}
})

从“Vue”导入Vue
从“../components/Hero/Hero”导入Hero
从“../components/PopularDest/PopularDest”导入PopularDest
从“vuex”导入{mapActions，mapState}
导出默认Vue.extend({
模板：`
大众体育赛事
`,
数据（）{
返回{
搜索查询：{
查询：[（如有）.searchInput]，
体裁：“运动”
}
}
},
更新（）{
console.log（this.searchInput）
},  
组成部分：{
英雄
大众化
},
方法：{
getSportData（）：void{
[（此为任意）.getEventData（this.searchQuery）]
},
…映射操作([
“getEventData”
])
},
计算：{
…地图状态([
“搜索输入”
])
}
})

---

我在这个项目中第一次使用Vuex模块，这似乎是我遇到问题的唯一迹象

如果您使用的是基于模块的存储结构，显然您无法像这样直接访问mapState中模块的状态。例如，如果您这样做-

this.$store.state.searchInput

您将得到

未定义的

，但如果您这样做

this.$store.state.yourModuleName.searchInput

您将得到该特定模块状态内的实际值

有两种方法可以解决此问题：

1.mapState内基于属性的访问

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

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

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

2.在模块中使用名称空间

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

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

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

---

在Vuex的github页面中，这个案例有一个悬而未决的问题-

提到错误的详细信息，而不是整个代码。这将是一个查找的好时机-