Question

我正在创建一个小型客户端Vuejs应用程序，并且在将数据分配给变量时遇到一些麻烦。在登录组件中，我使用eventBus发出用户数据，在索引组件中，我从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

使用箭头功能可以帮助您，因为它不会绑定自己的上下文。

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

Answer 2

我无法弄清楚为什么currentUser在外面被清空了 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
    }

Vuejs 2使用来自eventbus的事件接收数据将数据分配给变量

2 个答案: