Vuex 地图状态未定义状态

Question

我试图在这里使用我的状态作为搜索查询传递，但是当使用地图状态下拉状态时，它返回“未定义”......我以前从未遇到过这个问题。

这是代码：

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 模块，这似乎是我遇到问题的唯一指标。

Answer 1

如果您使用的是基于模块的 Store 结构，显然您无法像那样直接访问 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