项目中经常会有这样的需求：刚进入页面时获取用户权限，然后控制其他页面某些元素的显示（比如管理员权限会显示管理的tab。普通用户则不显示）。这个获取的权限可能会在很多页面中用到，如果存成全局的就比较方便了。

试过几种方法：

    1、请求成功后存在Vue.prototype.XXX

    2、请求成功后存在localstorage中

但是以上两种方法不能实现，因为请求是异步的，页面初始化用到这个值时请求还未完成，并且值更新后不会绑定到页面中。

因为只有一个变量，要使用vuex有点浪费了。

后来找到一种方法，将值存在根节点中，这样子组件就都能用到这个值了，值更新后也能实时渲染：

首先我们在根节点中初始化这个值：

var obj = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  data () {
    return {
      userRole: ''    //初始化userRole
    }
  }
})

然后在请求成功后更新这个值

axios('api/msg/getUserRole').then(data => {
  obj.$data.userRole = data.userRole
})

然后在子组件中通过$root.$data.userRole拿到这个值。

就可以啦！！！