javascript - 插件完成ajax调用后将vue绑定(bind)到根元素

Question

我将我的应用程序根元素 #app 绑定(bind)到 vue，在此之前我使用 Vue.use(myplugin) 加载我的自定义插件。我的插件进行 ajax 调用，加载数据并将其设置到 Vue.$permission 属性中。简而言之，我想在安装应用程序之前加载我的用户权限。但是当我的 ajax 调用正在获取权限数据时，应用程序已安装并且我的页面正在呈现，这需要权限对象。

有没有办法在我的插件完成后将应用程序根元素绑定(bind)到 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
    });

If a Vue instance didn’t receive the el option at instantiation, it will be in “unmounted” state, without an associated DOM element. vm.$mount() can be used to manually start the mounting of an unmounted Vue instance.

参见:https://v2.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
     }
 });