在Vue js中混合（当我在组件之间切换时，无法获得组件中的更新值）

Question

我在vue js中使用全局mixin，但问题是我在组件之间切换时我的组件没有获得更新值，而我从方法返回值（我可以在我切换状态时获取它（离线/在线）当再次在同一组件时）。我希望在不刷新浏览器的情况下更新基于网络检测的“checkOnline”值，但工作正常但如果我导航到其他选项卡并且他们从网络断开连接并返回到上一个选项卡，则“checkOnline”的状态不会更新。 / p>

x.js

import {bus} from '../main';
export default {
  data() {
    return {
      checkOnline: navigator.onLine || false
    }
  },
  created() {
    bus.$on('detected-condition', this.disableButton)
  },
  watch: {
    checkOnline: function (val) {
        if (navigator.onLine) {
          return true
        } else {
          return false
        }
    }
  },
  methods: {
    disableButton($event) {
      if ($event) {
        this.checkOnline = false
      } else {
        this.checkOnline = true
      }
    }
  }
}

a.vue

<v-flex xs12 class="text-xs-center">
       <v-btn fab dark small :color="checkOnline ? 'grey' : 'primary'" class="mx-0 mb-0 elevation-4" :class="{disabled: checkOnline}" >
         <v-icon>file_download</v-icon>
       </v-btn>
     </v-flex>

b.vue

import {bus} from '../main';
  const EVENTS = ['online', 'offline', 'load'];

  export default {
    props: {
      onlineClass: {
        type: String,
        required: false
      },
      offlineClass: {
        type: String,
        required: false
      }
    },
    data () {
      return {
        isOnline: navigator.onLine,
      }
    },
    mounted() {
      EVENTS.forEach(event => window.addEventListener(event, this.updateOnlineStatus));
    },
    beforeDestroy() {
      EVENTS.forEach(event => window.removeEventListener(event, this.updateOnlineStatus));
    },
    computed: {

    },
    methods: {
      updateOnlineStatus() {
        this.isOnline = navigator.onLine || false;
       bus.$emit('detected-condition', this.isOnline);
      }
    }
  };