我对 Vue 很陌生，我正在尝试用它创建我的第一个应用程序(虽然我已经完成了整个教程，所以它不像我完全陌生(。我来自Java/Grails背景，所以这个新的"面向前端的Web应用程序"对我来说仍然很困惑。我正在使用带有 webpack 的 Vue 2。
我遇到的问题是在应用程序初始化时运行方法，该方法在 App.vue 组件中创建数据(我假设是根组件，正确吗？(，然后在子组件中访问这些数据。所以具体来说，我要做的是在"创建的"生命周期钩子中，我想检查用户是否登录，然后我想相应地更新我的导航栏(如果没有，则显示登录按钮，否则显示用户名，例如(。
我什至还没有完全弄清楚我将如何准确确定用户是否已登录，因为到目前为止，我只是尝试在 App.vue 组件中创建虚拟数据，然后在子组件中访问它。我研究过的任何地方都说我应该使用事件总线，但(我认为(这对我不起作用(如果我错了，请纠正我(，因为我能找到的唯一例子是在用户事件上调用的所有$emit函数(如按钮点击(，我希望它始终在任何地方都可以全局访问数据(并且可变异(。
因此，我将尝试向您展示我所想到的一些代码：
App.vue：
...stuff...
data() {
return {
authToken = '',
userdetails = {},
loggedIn = false
}
},
created: function() {
// check browser storage for authToken
if(authToken) {
// call rest service (through Vue Resource) to Grails backend that I set up
// beforehand and set this.userdetails to the data that gets returned
if(this.userdetails) {
this.loggedIn = true;
}
}
}
...stuff...
首页：
<template>
<div class="home">
<nav-bar></nav-bar>
</div>
</template>
...stuff
NavBar.vue：
<template>
<div class="navBar">
<div v-if="loggedIn">Hi {{ userdetails.name }}</div>
<div v-else>Please log in before continuing.</div>
</div>
</template>
如果其中有任何代码有任何错误，请原谅，这只是为了或多或少地显示我正在尝试做的事情，我现在大部分都编造了它。所以主要问题是：我如何让v-if="loggedIn"和{{ userdetails.name }}部分工作(因为显然现在的设置方式不起作用，对吧？除此之外，任何关于 Vue js 中"全局变量"和数据流的一般建议都将不胜感激，因为我相信我的服务器端应用程序心态在前端 JavaScript 应用程序中可能不起作用。
要从父组件获取数据，您可以在子组件中使用this.$parent.userdetails。
但更好的方法是使用这样的道具
https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props
精简模式，不适用于复杂的共享任务
您可以使用预置字段在任何位置访问全局应用程序组件(路由、组件、嵌套组件(：
this.$root
过度工程师的注意事项：在 vue 指南中正式建议将其称为"精简"方法：https://v2.vuejs.org/v2/guide/state-management.html。
显然，它不是一个架构模式化的解决方案，但可以只共享一两个变量。
在这些情况下，这种精益方法避免了开发人员导入完整的共享框架，如vuex，大量开发，专有技术要求和页面下载，只是为了这样一个微不足道的共享任务。
如果你不喜欢精简版方法，即使被挪用和官方建议，也许不是如何分享问题，而是使用哪个框架。
例如，Angular 可能最适合重型工程方法，我并不是说一个比另一个更好，我的意思是不同的仪器最适合不同的任务和方法，当需要实现更重和更复杂的解决方案时，我也使用它，在这些情况下，即使使用 vuex，我也无法处理所有组件交互和实时数据共享。
其他开发者或 vue 本身不推荐以下方法。
this.$root;
或
this.$parent.userdetails
在我看来，跨组件共享任何数据的最佳方法是使用 vuex 状态管理。
这是官方文档链接：https://vuex.vuejs.org/#what-is-a-state-management-pattern