Javascript Vue.js视图没有'；t使用eventbus接收事件时更新

我是Vue.js 2的新手，正在构建我的第一个（Vue）web应用程序。 应用程序使用两个组件，一个标题组件和一个登录组件。 登录成功后，将在单例身份验证服务中切换“loggedIn”标志变量。 此服务负责向标头组件（可能还有其他侦听组件）发出事件，通知用户已登录。标题应该依次更新其视图并显示用户名

一切都按照描述工作，使用全局事件总线生成和发送/接收事件。 但是，当标题组件接收到事件时，它无法更新视图。

我已经尝试过不同的方法：基本订户模式、vuex，现在是事件总线。似乎什么都不管用。有人知道问题出在哪里吗

EventBus.js:

从“Vue”导入Vue
var eventBus=new Vue（）
导出默认事件总线

SessionService.js

Header.vue:Script

从'../../services/util/eventBus'导入eventBus'
var loggedIn=false
var m=这个
eventBus.$on（'LOGGEDIN'，函数（）{
console.log（'RECEIVED'）
m、 loggedIn=true
})
导出默认值{
名称：'标题'，
数据（）{
返回{loggedIn}
}
}

Header.vue:HTML

登录：{{loggedIn}


登记






拍卖

标题组件代码的结构有些奇怪，但我认为应该是这样的：

  export default{
    name: 'Header',
    data () {
      return { loggedIn: loggedIn }
    }
  }

---

您有一些奇怪的头组件代码结构，但我认为应该是这样的：

  export default{
    name: 'Header',
    data () {
      return { loggedIn: loggedIn }
    }
  }

---

在

Header.vue

组件中，当您注册

'LOGGEDIN'

侦听器时，您正试图通过

此

访问vue实例，但不在vue实例的范围内

将该逻辑移动到组件的

创建的

钩子中，以便在实例化组件时仍然注册

事件总线

侦听器，但

此

引用的是Vue实例：

import eventBus from '../../services/util/EventBus'

export default {
  name: 'Header',
  data() {
    return { loggedIn: false }
  },
  created() {
    let self = this;
    eventBus.$on('LOGGEDIN', function () {
      console.log('RECEIVED')
      self.loggedIn = true
    })
  }
}

---

在

Header.vue

组件中，当您注册

'LOGGEDIN'

侦听器时，您正试图通过

此

访问vue实例，但不在vue实例的范围内

将该逻辑移动到组件的

创建的

钩子中，以便在实例化组件时仍然注册

事件总线

侦听器，但

此

引用的是Vue实例：

import eventBus from '../../services/util/EventBus'

export default {
  name: 'Header',
  data() {
    return { loggedIn: false }
  },
  created() {
    let self = this;
    eventBus.$on('LOGGEDIN', function () {
      console.log('RECEIVED')
      self.loggedIn = true
    })
  }
}

---

旧，但答案是“=>”箭头函数

  eventBus.$on('LOGGEDIN', (playload)=>{
  console.log('RECEIVED')
  self.loggedIn = true
})

---

旧，但答案是“=>”箭头函数

  eventBus.$on('LOGGEDIN', (playload)=>{
  console.log('RECEIVED')
  self.loggedIn = true
})

---

谢谢你的回复，我也试过了，但没有成功。但这不重要，因为它是新的ES6语法。谢谢你的回复，我也试过了，但没有成功。但这不重要，因为这是新的ES6语法。