Vue - 插件准备好时挂载 vue答案

【问题标题】：Vue - mount vue when plugin is readyVue - 插件准备好时挂载 vue
【发布时间】：2020-03-07 18:08:01
【问题描述】：

我制作了一个“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'
}

【问题讨论】：

您想展示一下 OffersPlugin 代码的样子吗？
我现在无法准确显示（我在其他电脑上）。我编辑了我的问题，添加了插件概念。
为什么不使用条件语句v-if 来检查数组是否为空或不呈现您需要的内容？
我的基本问题：当插件完成http请求并且插件中的数据准备好时，是否可以挂载“vue”？我可以使用 v-if 或其他类似使用商店的东西。但在这种情况下，我需要我描述的功能。

标签： javascript vue.js vuejs2

【解决方案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');
} 
);

【讨论】：

在解析数据之前不会阻塞渲染吗？
@Random 是的，这就是原始问题的重点——“我如何告诉 vue 在插件准备好之前保持 init vue”。在大多数现实生活中，最好编写您的应用程序/组件，这样它就可以在没有任何数据的情况下工作（呈现一些存根或显示进度）并执行从生命周期挂钩（创建/安装）获取数据...
有道理，遇到这个问题时正在寻找异步插件的非阻塞模式

【解决方案2】：

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

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

【讨论】：