プラグインが終了したらvueをルート要素にバインドするajax呼び出しを終了する

Question

私は、アプリケーションのルート要素#appをvueにバインドする前に、Vue.use（myplugin）でカスタムプラグインをロードしています。私のプラグインは、ajax呼び出しを行い、データをロードしてVueに設定します。$ permission property ..これで、アプリケーションをマウントする前に私のユーザ権限をロードしたいと思います。私のAjaxコールがパーミッションデータを取得している間に、アプリケーションがマウントされ、ページがレンダリングされています。これにはパーミッションオブジェクトが必要です。

私のプラグインが終了した後、vueにアプリのルート要素をバインドする方法はありますか？または他の代替ソリューションですか？

Answer 1

ええ、それは実際には非常に簡単です：

const Vue = require('vue'); 

const vueInstance = new Vue({ 
    // don't specify the 'el' prop there 
}); 

doingAnAjaxCall() // assuming it returns a promise 
    .then(() => { 
     vueInstance.$mount('#root'); // only now the vue instance is mounted 
    }); 

Vueのインスタンスがインスタンス化のエルオプションを受信しなかった場合は、それが関連付けられたDOM要素なしで、「未実装」状態になります。 vm。$ mount（）は、マウントされていないVueインスタンスのマウントを手動で開始するために使用できます。

を参照してください：あなたのケースのためにそうhttps://vuejs.org/v2/api/#vm-mount

あなたはAJAX呼び出しの終了を検出するために、任意の非同期のメカニズムを使用することができます。プラグインオブジェクトにコールバック関数を渡して、あなたのvueインスタンスを内部にマウントするのが一番簡単な解決策かもしれません。

/* Define plugin */ 
MyPlugin = {}; 
MyPlugin.install = function(Vue, options) { 
    doingAnAjaxCall() 
     .then(data => { 
      // do something with data 
      options.callback(); 
     }); 
}; 

const Vue = require('vue'); 

/* Create the vue instance */ 
const vueInstance = new Vue({ 
    // don't specify the 'el' prop there 
}); 

/* Install the plugin */ 
Vue.use(MyPlugin, { // This object will be passed as options to the plugin install() 
    callback:() => { 
     vueInstance.$mount('#root'); // only now the vue instance is mounted 
    } 
});