Vue如何在main.js里从后端获取数据, 然后配置进Vue.use()中

Question

Vue如何在main.js里从后端获取数据, 然后配置进Vue.use()中
我使用axios从接口获取数据, 由于异步问题, 前端Vue.use(BaiduMap)这里总会报错
代码如下

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios';
import BaiduMap from 'vue-baidu-map'

Vue.prototype.$axios = axios

Vue.use(BaiduMap, {
  //这里我想改成从后端获取配置信息
  ak: 'AbcDefGHiJklMnOPQrst'   /** ak信息在后端配置 */
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Answer 1

要么在main.js里发起请求即:

main.js:

import Vue from 'vue'
import axios from 'axios';
import BaiduMap from 'vue-baidu-map'
axios(xxx).then(res => {
    Vue.use(BaiduMap,{ ak:res.ak });
})

要么在请求接口的组件里，引入BaiduMap，然后调用Vue.use:

xxx.vue

import Vue from "vue"
import BaiduMap from 'vue-baidu-map'
methods:{
    request(){
        axios(xxx).then(res => {
            Vue.use(BaiduMap,{ ak:res.ak });
        })
    }
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。