Как инициализировать приложение, когда загружены данные по API?

Question

[thehighhomie]

Столкнулся с проблемой при инициализации приложения. Пытаюсь инициализировать приложение, после того, как данные загружены:

main.js

ApiService.init()

if (JwtService.getToken()) {
  ApiService.setHeader()
  ApiService.mount401Interceptor()
  store
    .dispatch('auth/checkAuth')
    .then(() => {
      store.dispatch('project/getProjectById', router.app.$route.params.projectId)
    })
}

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div
    v-if="isLoaded"
    id="app"
    class="theme-dark"
  >
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'App',

  computed: {
    ...mapState(['isLoaded'])
  }
}
</script>

store: index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',

  modules,

  getters: {
    isLoaded (state) {
      return state.auth.user && state.project.project
    }
  }
})

Все это работает почти нормально, но когда я пишу vuex геттер, для форматирования данных проекта, и вывожу его где-либо, то сразу летят ошибки, что переменной project не существует, то есть геттеры в дочерних компонентах запускаются раньше, чем загружаются данные.

Мой мозг взорвался еще больше, когда я поставил корневому компоненту условие v-if="false".

Сам компонент не создается, но геттеры отрабатывают...

Как решить данную проблему?

Answer 1

[FullStack Alex]

Не совсем понимаю как работает первая часть main.js и зачем v-if="false", но по ходу нужно просто инициализировать внутри callback then:

ApiService.init()

if (JwtService.getToken()) {
  ApiService.setHeader()
  ApiService.mount401Interceptor()
  store
    .dispatch('auth/checkAuth')
    .then(() => {
      store.dispatch('project/getProjectById', router.app.$route.params.projectId)

      new Vue({
          router,
          store,
          render: h => h(App)
      }).$mount('#app')

    })
}