Vue方法中如何用IF/ELSE判断房间是否在joinedRooms数组并执行对应逻辑

问题根源 #

你原来的代码逻辑错误是将单个room对象和joinedRooms数组整体做全等/不等比较，单个对象永远不可能等于一个数组，所以if分支的判断条件永远为true，才会每次都走加入逻辑。

修复后的代码实现 #

分两种场景处理判断逻辑：

场景1：room是基础类型值（比如房间ID字符串/数字） #

直接用数组的includes方法判断是否存在即可：

methods: {
    joinRoom(room) {
        // 判断指定房间是否不在已加入列表中
        if (!this.$store.state.rooms.joinedRooms.includes(room)) {
            this.$store.dispatch(RoomTypes.JOIN_ROOM, room);
        }
        // 公共逻辑：不管是否已加入，都要切换当前激活房间、关闭弹窗
        this.$store.dispatch(RoomTypes.CURRENT_ROOM, room);
        this.$emit('onClose')
    }
},

场景2：room是对象类型，需要按唯一标识（比如id字段）判断 #

需要用some方法匹配唯一标识做校验：

methods: {
    joinRoom(room) {
        // 校验当前房间是否已加入：匹配id字段判断是否存在
        const isJoined = this.$store.state.rooms.joinedRooms.some(item => item.id === room.id)
        if (!isJoined) {
            this.$store.dispatch(RoomTypes.JOIN_ROOM, room);
        }
        this.$store.dispatch(RoomTypes.CURRENT_ROOM, room);
        this.$emit('onClose')
    }
},

内容的提问来源于stack exchange，提问作者ArcticMediaRyan