Vuejs 2使用事件从事件总线接收到的数据将数据分配给变量

Question

我正在创建一个小型客户端 Vuejs 应用程序，在将数据分配给变量时遇到了一些麻烦。在登录组件中，我使用事件总线发送用户数据，在索引组件中，我从 mounted: function () 内的事件总线接收数据。接收数据没有问题，但我想做的是将接收到的数据分配给 currentUser 变量。这就是我在 index component:

中的内容

mounted: function () {
    eventBus.$on('thisEvent', function (userObject) {
        console.log('event received!', userObject)
        this.currentUser = userObject.user
        console.log('The user: ', this.currentUser) // Shows correct new user data
    }.bind(this))
    console.log('User outside eventbus:', this.currentUser) // Shows empty user
}

这就是用户在数据中的样子：

data: function () {
  return {
     currentUser: {
     firstname: '',
     lastname: '',
     last_login: ''
    }
  }
}

我想不通为什么 currentUser 在 eventbus 之外被清空了。提前致谢！

**编辑：** This is how I have it now in my index.vue

**编辑 2：** This shows the output of the console logs. The left one shows the user object in the eventBus, the right one shows the console.log(this) outside the eventBus, with empty currentUser object

这是eventBus的$emit，get请求响应成功时调用。代码在 login.vue 中，其中填充经过身份验证的用户对象，并将此数据传输到 index.vue。

eventBus.$emit('thisEvent', { user: this.user })

Answer 1

I cannot figure out why the currentUser is emptied outside the eventbus.

因为 this 范围。在经典函数语法中，您从函数绑定 this 。使用如下所示的箭头函数，它会工作，因为它不绑定 this 所以 this.currentUser 将更新您的组件数据，而不仅仅是函数数据。

mounted: function () {
    eventBus.$on('thisEvent', (userObject) => {
        console.log('event received!', userObject)
        this.currentUser = userObject.user
        console.log('The user: ', this.currentUser) // Shows correct new user data
    })
    console.log('User outside eventbus:', this.currentUser) // Shows empty user
}

如果以上方法无法正常工作，请尝试以下解决方案：

mounted: function () {
        let _self = this;
        eventBus.$on('thisEvent', (userObject) => {
            console.log('event received!', userObject)
            _self.currentUser = userObject.user
            console.log('The user: ', _self.currentUser) // Shows correct new user data
        })
        console.log('User outside eventbus:', _self.currentUser) // Shows empty user
    }

Answer 2

使用箭头函数会有所帮助，因为它不会绑定自己的上下文。

mounted: function () {
  eventBus.$on('thisEvent', (userObject) => {
    console.log('event received!', userObject)
    this.currentUser = userObject.user
    console.log('The user: ', this.currentUser)
  })
  console.log('User outside eventbus:', this.currentUser)
}

另一种方式：（如果您不使用 babel 或想支持不支持 ES6 的浏览器）

mounted: function () {
  var self = this
  eventBus.$on('thisEvent', function (userObject) {
    console.log('event received!', userObject)
    self.currentUser = userObject.user
    console.log('The user: ', self.currentUser)
  })
  console.log('User outside eventbus:', self.currentUser)
}

编辑

问题中的代码和线程中发布的解决方案都可以正常工作。您看到的输出是完全正常的。

mounted: function () {
  eventBus.$on('thisEvent', function (userObject) {
    console.log('event received!', userObject)
    this.currentUser = userObject.user
    console.log('The user: ', this.currentUser) // Shows correct new user data
  }.bind(this))
  console.log('User outside eventbus:', this.currentUser) // Shows empty user
}

mounted lifecycle 挂钩在组件的模板和数据准备就绪并呈现时调用。

（您可以在 created 挂钩中执行与在 mounted 中相同的操作）

所以

console.log('User outside eventbus:', this.currentUser)

在您的 eventBus 发出事件之前记录。

您可以像这样使用 watch 轻松检查：

watch: {
  currentUser(newValue, oldValue) {
    console.log(newValue, oldValue)
  }
}

这是一个有效的 jsfiddle

Vuejs 2使用事件从事件总线接收到的数据将数据分配给变量

Vuejs 2 assign data to variable with event received data from eventbus

javascript

vue.js

vuejs2