Почему данные из vuex не отображаются?

Question

[Андрей]

В экшенах есть запрос к бд. На нужной странице я вызываю его в хуке mounted.

Экшн отрабатывает без ошибок и данные записываются в хранилище, что можно увидеть в devtools.
Все данные так же корректно отображаются, если они были прежде загружены.
Однако, проблема в следующем: если страницу полностью обновить, то данные не успевают подставляться. Я пробовал вызывать экшн в разных хуках, но ситуация не меняется.

Comments

[Сергей delphinpro]

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

[Андрей]

Сергей delphinpro, по логике так и должно быть, но данные в хранилище есть, а компонент не перерисовывается.

Answer 1

[Артур Мустафин]

Вам нужно заблокировать обновление страницы (этап рендера) до момента полной загрузки всех модулей и/или данных одним из традиционных способов.

Answer 2

[Klein Maximus]

В data компонента или state хранилища заведите какое-то поле под статус (по умолчанию, "не готов"). Пока статус в значении "не готов", показывайте заглушку или спиннер. Поставьте так же либо вотчер в компоненте на значение в сторе, либо вотчер на мутацию, либо ... . В общем, когда данные во vuex поменяются, меняйте свой статус на "готов".

Update: Если же Вы используете какие-то решения, типа vue-ssr, nuxt, uvue и т. д., в общем, где есть асинхронные методы (asyncData), то в таких методах можно возвратить Promise, и пока он не "резолвнется" рендеринга не произойдет.