Javascript Vue-插件就绪时安装Vue

我制作了一个OffersPlugin，在安装过程中可以从服务器获取一些数据。在vue中加载的第一个组件中需要这些数据。但http请求无法在加载vue组件之前完成，并且我没有任何数据可供使用

在插件准备就绪之前，我如何告诉vue保持初始化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'
}

---

HTTP请求本质上是异步的。Vue初始化本质上是同步的。

解决方法：

OffersPluginFactory.js：

常量pluginFactory=函数{ 让promise=axios.get .然后…处理数据。。。 //返回包含数据的插件对象 .thendata=>{ installVue，选项{ …在这里使用数据。。。 } }; return promise；//解析后，此promise返回插件对象 } 导出默认插件； main.vue：

---

HTTP请求本质上是异步的。Vue初始化本质上是同步的。

解决方法：

OffersPluginFactory.js：

常量pluginFactory=函数{ 让promise=axios.get .然后…处理数据。。。 //返回包含数据的插件对象 .thendata=>{ installVue，选项{ …在这里使用数据。。。 } }; return promise；//解析后，此promise返回插件对象 } 导出默认插件； main.vue：

尝试在Vue中使用beforeCreate{}

尝试在Vue中使用beforeCreate{}

---

你想展示OffersPlugin代码的样子吗？我现在不能准确地展示它，我在其他电脑上。我编辑了我的问题添加了插件概念。为什么不使用条件语句v-if来检查数组是否为空或不呈现你需要的内容？我的基本问题：当插件完成http请求和插件中的数据时，是否可以装载vue准备好了吗？我可以用v-if或者像use store这样的东西。但在这种情况下，我需要我描述的功能。你想展示OffersPlugin代码的样子吗？我现在无法准确显示它，我在其他电脑上。我编辑了我的问题添加插件概念。为什么不使用条件语句v-if检查数组是否为空或不呈现你需要的内容？我的基本问题：是否可以装载当插件完成http请求并且插件中的数据准备就绪时，vue？我可以用v-if或者像use store这样的东西。但在这种情况下，我需要我描述的功能。在数据解析之前，这不会阻止渲染吗？@Random是的，这是原始问题的重点-在插件准备好之前，我如何告诉vue保持init vue。在大多数现实生活中，最好编写应用程序/组件，这样它就可以在没有任何数据的情况下工作，呈现一些存根或显示进度，并从创建/安装的生命周期挂钩中执行数据提取……这很有意义，当遇到这个问题时，我正在为异步插件寻找一种非阻塞模式。在数据解决之前，它不会阻塞渲染吗？@Random是的，这就是最初问题的重点-我如何告诉vue在插件准备好之前保持初始化vue。在大多数现实生活中，最好是编写应用程序/组件，这样它就可以在没有任何数据的情况下工作呈现一些存根或显示进度，并从创建/安装的生命周期挂钩中执行数据获取……有道理，当遇到这个问题时，我们正在寻找异步插件的非阻塞模式

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

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

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