使用事件总线接收到事件时，Vue.js 视图不会更新

Question

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

一切都按照描述进行，事件是使用全局事件总线生成和发出/接收的。 但是，当头部组件接收到事件时，它无法更新视图。

我已经尝试了不同的方法：基本的订阅者模式、vuex 和现在的事件总线。似乎没有任何效果。有谁知道可能是什么问题？

EventBus.js：

import Vue from 'vue'
var eventBus = new Vue()
export default eventBus

SessionService.js

import eventBus from '../util/EventBus'

class SessionService {
  loggedIn=false
  constructor () {
    if (this.isValid(this.getSessionToken())) {
      this.loggedIn = true
    }
  }
  setSessionToken (token) {
    localStorage.setItem('token', token)
    if (this.isValid(token)) {
      eventBus.$emit('LOGGEDIN')
    } else {
      eventBus.$emit('LOGGEDOUT')
    }
  }
  getSessionToken () {
    return localStorage.getItem('token')
  }
  isValid (token) {
    return token !== undefined && token != null && token !== ''
  }
}
var sessionService = new SessionService()
export default sessionService

Header.vue：脚本

  import eventBus from '../../services/util/EventBus'
  var loggedIn = false
  var m = this
  eventBus.$on('LOGGEDIN', function () {
    console.log('RECEIVED')
    m.loggedIn = true
  })

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

Header.vue: HTML

<template>
  <div>
  <nav class="navbar navbar-expand-lg ap-top-nav">
    <div class="container" >
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <form class="form-inline my-2 my-lg-0 mr-auto">
          <div class="ap-searcher">
            <input class="ap-search" type="text" placeholder="Search" aria-label="Search"/>
            <i class="fa fa-search"></i>
          </div>

        </form>
        <div class="logo ml-auto mr-auto">
          <img src="../../assets/images/logo.png"/>
        </div>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ap-button blue wide">
            <router-link to="/login">Login: {{loggedIn}}</router-link>
          </li>
          <li class="nav-item ap-button light-blue wide">
            <router-link to="/registration">Register</router-link>
          </li>
          <li class="nav-item ap-button blue-border">
            <a href="#">EN <i class="fa fa-sort-desc" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>

    </div>
  </nav>
    <nav class="navbar navbar-expand-lg ag-bottom-nav">
      <div class="container">
        <div class="collapse navbar-collapse " id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <router-link class="nav-link ap-link" to="/">Auctions</router-link>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Lots</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Organize your own auction</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact </a>
            </li>
          </ul>
        </div>
      </div>

    </nav>
    <div class="ap-line">
    </div>
  </div>
</template>

Answer 1

在您的Header.vue 组件中，当您注册'LOGGEDIN' 侦听器时，您正试图通过Vue 实例范围之外的this 访问Vue 实例。

将该逻辑移到组件的 created 钩子中，以便在实例化组件时仍然注册 eventBus 侦听器，但 this 正在引用 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
    })
  }
}

Answer 2

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

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

Answer 3

旧的，但答案是'=>' ARROW_Function

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