thehighhomie
@thehighhomie

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

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

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".

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

Как решить данную проблему?
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
@Tech_Nomad
Веб-разработчик, переводчик, фрилансер, кочевник
Не совсем понимаю как работает первая часть 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')

    })
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы