如何从 socket.io 监听函数访问 vue 组件数据？

Question

我的服务器上有这段代码，

socket.on('join-room', (roomId, passcode, nickname) => {
        room = rooms.find((e) => e.id == roomId)

        if (!room) {
            socket.emit('join-room-error', 'Room not found!',)
            return
        }
        if (room.users.has(nickname)) {
            socket.emit('join-room-error', 'Nickname has been used!',)
            return
        }
        if (!room.passcode) {
            JoinRoomWithNickname(room, nickname)
            return
        }
        if (room.passcode != passcode) {
            socket.emit('join-room-error', 'Wrong passcode!')
            return
        }

        JoinRoomWithNickname(room, nickname)
    })

我想听听来自 socket.io 的错误。所以在 created 函数中我添加了一些监听器但是在监听器函数中我似乎无法访问 vue 组件数据

    created() {
        this.$socket.removeAllListeners()

        this.$socket.on('join-room-success', function() {
            store.state.roomId = this.id
            router.push('/room')
        })
        this.$socket.on('join-room-error', function(err) {
          this.errorLog = err
          // I can't access this.errorLog from there
        })
    },
    data: function() {
        return {
            code: '',
            nickname: '',
            wasWrongPasscode: false,
            isEnteringPasscode: true,
            errorLog: null
        }
    },

Answer 1

当您想将全局上下文 (this) 传递给被调用的函数时，您应该使用箭头函数。

this.$socket.on('join-room-error', (err) => {
          this.errorLog = err
        })

如何从 socket.io 监听函数访问 vue 组件数据？

How to access vue component data from socket.io listener function?

socket.io

vue.js

vuejs2