Vue - 플러그인이 준비되면 vue 마운트

Vue - 플러그인이 준비되면 vue 마운트

"설치" 기능 중에 서버에서 데이터를 가져오는 "OffersPlugin"을 만들었습니다.이 데이터는 vue에 로드된 첫 번째 컴포넌트에 필요합니다.그러나 vue 구성 요소가 로드되기 전에 http 요청을 완료할 수 없으며 사용할 데이터가 없습니다.

플러그인이 준비되기 전에 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 = [];

프로토타입으로 method getOfferId를 사용합니다.

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

HTTP 요청은 기본적으로 비동기입니다.Vue 초기화는 기본적으로 동기화됩니다.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');
} 
);

사용하려고 하다beforeCreate(){}Vue 안에.

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

언급URL : https://stackoverflow.com/questions/58811779/vue-mount-vue-when-plugin-is-ready