Question

我的main.js文件引用#app作为el，然后在ready上向我的API发送HTTP请求，以根据用户的令牌获取用户数据取自localStorage。

在返回响应时设置数据：

this.$http.get('/me', function(data) {
  this.$set('me', data.me);
})

在上述请求返回响应后，data现在看起来像这样：

data = {
  me: {
    email: 'email@email.com',
    name: 'Email Email'
  }
}

然后在main.js文件中我实现vue-router然后我的应用程序被引导。它呈现我的侧面导航和其他组件，中间有一个<router-view></router-view>主要内容。

Ex（从app.html呈现的main.js）：

<div is="navigation"></div>
<router-view></router-view>

在我的导航组件中，以及vue-router呈现的组件中，如何访问我想要全局的数据，例如在根组件中设置的me？

我希望能够访问用户电子邮件等数据并在整个应用程序中命名。

Answer 1

编辑::查看新包Vuex - https://github.com/vuejs/vuex。这是一个可以从任何组件中访问的应用程序数据的高级存储。这绝对是现在最好的选择。

原始答案：

我能想到的一些选择：

1）将当前用户数据传递给需要它的每个组件。这有点令人讨厌，但保持了组件不需要任何外部信息来执行其功能的原则。

2）使用this.$parent将组件链向上移动到根组件，在那里您将能够访问所需的数据。

3）只做一个全局变量。将其声明在Vue的范围之外，并且可以在任何地方访问它。

Answer 2

$root为我工作。在组件层次结构的每个级别，它都指代根数据。

例如，您在组件内部，而子组件需要email，则可以执行以下操作来访问电子邮件：

$root.me.email