У меня приложение на однофайловых компонентах. Vue, Vuex, axios ...
Использую Vue CLI, Webpack.
В моём приложении есть Vuex хранилище $store. Данные из $store используются в шаблонах компонентов. $store заполняется данными в основном приложении App. Краткая структура:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div id="app">
<v-app>
<MainContent/>
</v-app>
</div>
</template>
<script>
import MainContent from '@/components/MainContent'
import axios from 'axios'
import store from '@/store'
export default {
name: 'App',
components: {
MainContent,
},
data: () => {
return {
...
}
},
mounted () {
const vm = this
async function loader () {
const response = await axios.post('https://site.ru/get_data')
if (response.status === 200) {
await store.dispatch('setData', response.data.Data)
}
}
loader()
}
}
</script>
Маршрут / загружает в MainContent компонент, который требует наличия данных, которые загружаются в mounted.
Проблема в том, что рендеринг этого компонента начинается тогда, когда данные ещё не загружены. async и await никакого эффекта не дают!
Т.е. если пользователь нажмёт F5 на любой странице сайта, которая содержит зависимый от $store компонент, то получит ошибку.
Как загрузить в хранилище данные до рендеринга шаблонов? Можно конечно в шаблонах поставить v-if с условием наличия данных. Но в файле компонента есть не только шаблон, но и код, который может содержать хуки жизненного цикла, и им могут понадобиться данные из $store. Собственно, так и есть. Можно и там поставить промисы, но это как-то очень не по феншую.
Есть красивое решение?
