延迟 Vue.JS 组件加载，直到 promise 得到解决

Question

我正在构建的 Vue.JS 应用程序中大量使用 libsodium.js。 Libsodium.js 不能立即使用，它会进行一些异步加载。

因为我几乎在每个 .vue 组件中都使用这个库，所以我需要延迟 Vue 中的实际组件加载，直到 libsodium 完全加载。

我正在想象这样的事情：

// My root component
const app = new Vue({
    data() {
        return {
            sodium: null
        }
    },
    el: '#app',
    components: { ... },
    router,
    created() {
        const _sodium = require('libsodium-wrappers');
        (async() => {
            await _sodium.ready;
            this.sodium = _sodium;

            // Start loading the vue-router routes (and thus my components) here
            startLoadingComponents();
        })();
    }
});

完成此任务的最佳方法是什么？

Answer 1

重组您的代码，以便在钠准备就绪之前不会创建 Vue。

const _sodium = require('libsodium-wrappers');

function startLoadingComponents(){
  const app = new Vue({
      data() {
          return {
              sodium: _sodium
          }
      },
      el: '#app',
      components: { ... },
      router,
  });  
}

(async() => {
  await _sodium.ready;

  // Start loading the vue-router routes (and thus my components) here
  startLoadingComponents();
  // you could also just really do the new Vue right here...
})();

延迟 Vue.JS 组件加载，直到 promise 得到解决

Delay Vue.JS component loading until promise is resolved

javascript

encryption

asynchronous

libsodium

vue.js