Vue.js从子组件访问父/根数据

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范围之外,并可以随时随地访问它.