Vuex组件传参时的类型问题

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
}