Question

我创建了一个“ OffersPlugin”，可以在“安装”功能期间从服务器获取一些数据。并且在vue中加载的第一个组件中需要该数据。但是在vue组件加载之前，http请求无法完成，而且我没有任何数据可以使用。

我如何告诉vue在插件准备好之前保留init vue？

谢谢。


import Vue from 'vue';

import VueCookie from 'vue-cookie';
import App from './ExampleComponent';

import OffersPlugin from '../plugins/OffersPlugin';


Vue.use(VueCookie);
Vue.use(OffersPlugin);

if(document.getElementById("vue-promotion-edit-section")) {
    new Vue({

        render: h => h(App)
    }).$mount('#vue-promotion-edit-section');

在安装方法中，我有axios GET请求。在该请求中，我从服务器的报价列表中加载。当请求成功时，我将使插件变量关联数组：

const offerList = [];

作为原型，我使用方法getOfferId。

function(name) 
{
return offersList[name] || 'No offer'
}

Answer 1

HTTP请求本质上是异步的。 Vue初始化本质上是同步的。 You cannot make a synchronous result out of an asynchronous operation in Javascript.

解决方法：

OffersPluginFactory.js：

const pluginFactory = function() {
  let promise = axios.get()
    .then(...process data...)
    // return plugin object with data inside
    .then(data => ({
      install(Vue, options) {
        ...use data here...
      }
    }));
  return promise; // when resolved this promise returns plugin object
}

export default pluginFactory;

main.vue：

import OffersPluginFactory from '../plugins/OffersPluginFactory';

OffersPluginFactory().then( function(plugin) {
  Vue.use(plugin)

  new Vue({
    render: h => h(App)
  }).$mount('#vue-promotion-edit-section');
} 
);

Answer 2

尝试在Vue中使用beforeCreate(){}。

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Vue-插件准备就绪时挂载Vue

2 个答案: