javascript - 准备 Vue.js 前端之前的初始化逻辑

Question

我们目前正在实现一个在 webview 中运行的混合 web 应用程序，并决定使用基于 vue-cli webpack 模板和 vuex 的架构。

容器应用程序为我们提供了几个 API(导出到窗口对象)，我们必须在启动期间调用这些 API 以准备我们的前端。此外，我们必须在初始化应用程序时执行最多两个 xhr。

我们的计划是在 main.js 中运行这个初始化逻辑。由于我们的 API 是基于 promise 的，我们将在所有 promise 都被解析后创建 Vue 实例。这听起来是个好方法吗？或者您对更好的技术有什么建议吗？

Answer 1

在您发表评论后，我明白了。但是您仍然可以将“prevue”和“postvue”步骤集成到单个模块中:

// External function in module
function initializeApp (vueCreated) {
  return new Promise((resolve, reject) => {
    switch (vueCreated) {
      case false: // "prevue" initialization steps
        console.log('vue not yet created, prevue steps happens')
        // ...
        setTimeout(_ => resolve(), 3500) // async call
        break;
      case true: // we can continue/prepare data for Vue
        console.log('vue created, but waiting for next initialization steps and data')
        // ...
        setTimeout(_ => resolve('Mounted / shown when app ready'), 3500) // async call
      }
  })
}

initializeApp(false).then(_ => {
  new Vue({
    template: '#app',
    data: {
      content: null
    },
    async created () {
      this.content = await initializeApp(true)
      this.$mount('#app')
      console.log('all inicialization steps done, data arrived, vue mounted')
    }
  })
})

.fade-enter { opacity: 0; transform: translateY(30px) }
.fade-enter-active { transition: all .4s }

<template id="app">
  <transition name="fade" appear>
    <p>{{ content }}</p>
  </transition>
</template>

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>