javascript - 如何在不使用事件总线的情况下在另一个组件中获取一个组件中的数据属性的值？

Question

我有一个数据属性“auth”，它保存用户是否登录。如果为空则用户未登录，如果其中有“loggedin”则用户已登录。

这是一个名为“App.vue”的组件，我有另一个名为“DashboardComponent.vue”的组件。如果用户未经过身份验证，但输入“/dashboard”URL，我希望应用程序将用户踢回登录屏幕。如何将“App.vue”组件中的“auth”数据获取到“DashboardComponent.vue”中并检查用户是否已通过身份验证(在仪表板呈现之前)？

编辑:

这就是我目前正在尝试的方式

[DashboardComponent]
EventBus.$on('logged-in', status => {
  this.auth = status
})

beforeMount () {
    if (this.auth !== 'loggedin') {
      router.push({name: 'login'})
    }
}

这是正确的方法吗？如果是这样，为什么它不起作用？

Answer 1

将数据声明到 vue 初始化的主文件中

window.App = new Vue({
  el: '#app',
  router,
  components: { App },
  data: function(){
        return {
          auth:''
        }
   }

})

之后您可以在主文件中将其更改为

mounted:function(){
  //when logged in then change status
  this.status = 'loggedIn'
}

现在使用 App.status 在任何组件中访问它