Столкнулся с проблемой при инициализации приложения. Пытаюсь инициализировать приложение, после того, как данные загружены:
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".
Сам компонент не создается, но геттеры отрабатывают...
Как решить данную проблему?
