准备Vue.js Frontend前的初始化逻辑 [英] Initialization logic before preparing Vue.js Frontend

问题描述

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

We are currently implementing a hybrid web application running inside of a webview and decided to use an architecture based on the vue-cli webpack template and vuex.

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

The container app offers us several APIs (exported to the window object) we have to call during startup in order to prepare our frontend. In addition we have to perform up to two xhr while initializing our application.

我们的计划是在 main.js 中运行这个初始化逻辑.由于我们的 API 是基于 Promise 的，因此我们将在所有 Promise 解决后创建 Vue 实例.这听起来是个好方法还是您有更好的技术建议?

Our plan is to run this init logic inside the main.js. Since our APIs are promise-based we will create the Vue instance after all promises are resolved. Does this sounds like a good approach or do you have any suggestions of a better technique?

推荐答案

在您发表评论后，我明白了.但是您仍然可以在单个模块中集成您的prevue"和postvue"步骤:

After your comment i got the point. But you can still integrate your "prevue" and "postvue" steps in single module:

// 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 Frontend前的初始化逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！