vue首页异步请求后数据不渲染

自己遇到的问题记录一下，做一个企业微信鉴权登录，首页获取用户信息存session方便后续页面调用。
在App.vue中写了鉴权，调用接口拿到了返回的用户信息，并且存在了session中。但是在首页home.vue中拿取不到session数据。后来查了半天，请教了几个vue同行知道问题出在了哪里。
由于是异步请求，而app和home在请求还未完成时就已经加载完毕了，导致从session中拿取不到数据。知道问题出在哪里就可以针对性解决了。
本来想通过vuex去解决，但是这个问题只存在首页，没必要引入vuex，所以就使用了evenbus去传值。不说了，上代码。
首先现在main.js里
main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入URL配置
import ajax from '../static/config/request'

Vue.config.productionTip = false;
Vue.prototype.$axios = ajax;
// 声明一个全局的evenbus
window.evenBus = new Vue();

App.vue

  created(){
    // 初始化调试工具
    var vConsole = new VConsole();
    // 授权登陆
    if(!this.getCode('code')) {
      let redirect_uri = encodeURIComponent('www.asdasdsd.com')
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+window['cutModel'].appid+'&redirect_uri='+redirect_uri+'&response_type=code&scope=snsapi_base&agentid='+window['cutModel'].agentid+'&state=STATE#wechat_redirect'
    } else {
      // 获取用户信息
      this.getUserInfo()
      console.log('app: '+sessionStorage.getItem('user'))  // 这里打印是null，其实session中已经存了
    }
  },
  methods:{
    getUserInfo() {
      let nowcode = this.getCode('code')
      let dataobj = {
        'Code': nowcode,
        // 'Code': 'nZCZMLmDMocbEksqNbtJJ07E_xPgusw4GtskBl5PCX8',
      }
      this.$axios.get('asdsadasd', dataobj)
      .then(res => {
        res = JSON.parse(res)
        // console.log(res)
        if(res.Data.Statu_Code == 200) {
          sessionStorage.setItem('user', JSON.stringify(res.Data.UserInfo))
          // 异步执行，无法在本页面中查到。使用evenbus传值
          evenBus.$emit('userInfo',res.Data.UserInfo)
        } else {
          console.log(res.Data.Msg)
        }
      })
      .catch(err => {
        console.log(err);
      });
    },
    getCode(codeName) {
        const reg = new RegExp('[?&]' + codeName + '=([^&#]+)');
        let query = window.location.href.match(reg)
        return query ? query[1] : null;
    },
  }

home.vue

    created() {
        console.log('home: '+sessionStorage.getItem('user'))     // 这里打印是null，其实session中已经存了
        evenBus.$on('userInfo',this.getuser)
    },
    methods: {
        getuser(userInfo) {
            this.ZSNAME = userInfo.ZSNAME
        }
    }

好了，解决，但是还用一点小小的瑕疵就是页面出来后这个数据会有一点点延迟才会显示出来。这个主要是看请求速度了。
如果小伙伴门还有其他不使用vuex和evenbus的方法的话，欢迎交流。

最后编辑于：2019.10.18 17:40:10