イベントバスを使用してイベントを受信したときにVue.jsビューが更新されない

Question

Vue.js 2を初めて使用し、最初の（vue）Webアプリケーションを構築しています。 アプリケーションでは、ヘッダーコンポーネントとログインコンポーネントの2つのコンポーネントが使用されます。 ログインが成功すると、 "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コンポーネントで

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

Answer 2

'LOGGEDIN'リスナーを登録すると、Vueインスタンスのスコープ外にある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 
    }) 
    } 
}