在插件完成ajax調用後，將vue綁定到根元素

Question

我將綁定我的應用程序根元素#app到vue，然後我使用Vue.use（myplugin）加載我的自定義插件。我的插件進行ajax調用，加載數據並將其設置爲Vue。$ permission屬性..所以簡而言之，我想在裝入應用程序之前加載我的用戶權限。但是當我的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的情況下沒有得到實例化的EL選項，這將是「未安裝」狀態，沒有相關聯的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 
    } 
});