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

我正在创建一个小型客户端Vuejs应用程序，在将数据分配给变量时遇到了一些问题。在登录组件中，我使用eventBus发送用户数据，在索引组件中，我从

mounted:function（）

中的eventBus接收数据。我在接收数据方面没有问题，但我想做的是将接收到的数据分配给

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
}

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

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

我无法理解为什么currentUser在eventbus之外被清空。提前谢谢

**编辑：**

**编辑2：**

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

eventBus.$emit（'thisEvent'{
用户：this.user
})

我不明白为什么当前用户在
事件巴士

因为
这个
范围。在经典函数语法中，您正在从函数绑定此

。使用如下所示的箭头函数，它将正常工作，因为它不会绑定

此

所以

此。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
    }

---

使用arrow函数将对您有所帮助，因为它不绑定自己的上下文

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 () {
  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

钩子

（您可以在创建的

钩子中执行与在装载的
钩子中相同的操作）

所以

在
eventBus
发出事件之前记录

您可以使用
手表
轻松检查这一点，如下所示：

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

这是一个正在工作的
删除绑定
谢谢您的回复，我也尝试了您的解决方案，但不知怎么的，用户仍然是空的。@eleinaneiborg您可以尝试将vue实例存储到变量中，类似这样的
var vm=new vue（{//other code…}）
，然后您可以通过键入
vm.currentUser
访问用户-这应该是纠正ContextElena的指针-这真的是不可能的。请尝试通过JSFiddle或Webpack bin向我们显示您的代码。您是否删除了绑定（this）

？请查找拼写错误等。此代码应该可以直接工作。由于您使用的是let keyoword，它也是ECMAScript 6规范的一部分，因此不需要self；）我将删除

let

我只想添加可以实现这一点的方法列表：）谢谢。是的，你的答案非常好，我只想指出-如果OP不使用Babel，但希望支持较旧的浏览器。@BelminBedak我将在答案的这一部分上面添加它。谢谢你的回复，我已经尝试了你的解决方案，但不知何故用户仍然是空的..有问题的代码应该可以正常工作，问题似乎在其他地方。你能在jsfiddle上发布全部代码吗？@AmreshVenugopal我已经编辑了这篇文章并添加了一个屏幕截图，希望这能让它更清晰！您能同时添加控制台截图吗？@AmreshVenugopal添加了另一个截图！所以第一个

console.log（this）

（在

eventBus.on

上的

eventBus.on内）没有打印任何内容？
console.log('User outside eventbus:', this.currentUser)

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