Vuex组件传参时的类型问题
这是个很白痴的问题,但是确实花了我1个多小时才解决
问题背景
<transition name="slide-left" mode="out-in">
<categoryList v-if="flag"
:search="search"
@selectCategory="selectCategory">
</categoryList>
<dishList v-else
:search="search"
:selectedID="selectedID"
@closeDishList="closeDishList">
</dishList>
</transition>
categoryList
是类别的列表
dishList
是菜品的列表
我想选中一个类别之后显示该类别下的菜品列表
这就需要把从categoryList
中选中的categoryID
传入dishList
传入后再通过this.$store
获取相应数据
// this.selectedID就是上面所说的categoryID
dishList () {
var temp = []
this.$store.state.dish.relationMap.get(this.selectedID).forEach(e => {
temp.push(this.$store.state.dish.dishMap.get(e))
})
return temp
}
我的relationMap是Map(int, Set([int,int,int…]))
问题来了,this.$store.state.dish.relationMap.get(this.selectedID)
返回的居然是undefined
解决方法
解决的过程很曲折,怀疑了很多可能性,最后发现居然是类型问题
categoryID
是从categoryList
里emit
出来的,emit
的参数是<div>
的id
,id
是一个string
,所以实际上我返回的是string
而不是int
showDishList (event) {
// 这里的id是<div>的id
this.$emit('selectCategory', event.currentTarget.id)
}
所以把获取数据的代码改成下面这样就行
// this.selectedID就是上面所说的categoryID
dishList () {
var temp = []
this.$store.state.dish.relationMap.get(parseInt(this.selectedID)).forEach(e => {
temp.push(this.$store.state.dish.dishMap.get(e))
})
return temp
}