Question

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

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

我们的计划是在main.js中运行此init逻辑。由于我们的API是基于承诺的，因此我们将在解决所有承诺后创建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>

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

1 个答案: