Как ждать первоначального наполнения стора перед загрузкой страницы?

Question

[hckn]

Мне нужно аутентифицировать первоначальную загрузку страницы (т.е. единоразово, а не по каждому переходу уже внутри приложения) запросом на /api/init, получением ответа, наполнением стора, и только затем пускать юзера или нет. Я не могу понять самое ранее место в Вью приложении где это можно сделать?

Если я это делаю в main.js, то приложение не ждет результата запроса.
Делать это в каждом beforeEnter не подходит, хоть и работает, т.к. мне это нужно только единоразово при загрузке страницы.
В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

UPD: В хуке App.vue - это не подходит, т.к. страница загружается не дождавшись конца запроса.
Но куда?

Answer 1

[0xD34F]

В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

Это какую такую логику? У вас там в created будет простой вызов экшена, это одна строка. Уместно, делайте.

UPD. Вынесено из комментариев:

Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?

Можете в своём main.js завернуть создание экземпляра vue в коллбек экшена, который загружает данные:

store.dispatch('получитьДанные').then(() => {
  new Vue({
    el: '#app',
    store,
    router,
    ...

Только пользователь ничего не увидит в процессе загрузки. А если инициировать загрузку данных внутри, можно показывать какой-нибудь прелоадер, пока данные не будут получены:

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>

Comments

[hckn]

Кажется есть более подходящее место. Не совсем понятно почему асинхронная функция не срабатывает в main.js? Неужто нет других вариантов. Насчет App.vue понял, спс

[hckn]

Забираю слова обратно. Только что проверил created в App.vue - страница загружается преде чем запрос закончен и только потом наполняется стор! Т.е. это не подходит вообще

[0xD34F]

Подходит. Есть способ не рендерить элементы, требующие каких-то данных, пока эти данные не будут получены. Вы подумайте.

[hckn]

0xD34F, это костыль, вот мне делать нечего еще в темплейт лезть. Вы мне серьезно сейчас предлагаете завернуть все приложение в v-if??? Я был о вас лучшего мнения.

[0xD34F]

Моё дело предложить.

[hckn]

СТранное преддожение, учитывая

У вас там в created будет простой вызов экшена, это одна строка

А тут оказывается еще надо маленький пустячок - завернуть все приложение в v-if))

Красота какая! Вот это во Вью стиле точно.

[0xD34F]

оказывается еще надо

Думал, сами догадаетесь. Был о ваших умственных способностях лучшего мнения.

[hckn]

оказывается еще надо

Это был сарказм, потому что я бы до такого не додумался не потому что я тупой, а потому что это выглядит тупо и я бы такое решение сразу отмел) Ну неужели вы считаете это нормальным решением? Я конечно понимаю что во Вью мире все вперемешку и с ног на голову, но это ж за гранью.

[hckn]

Вдумайтесь - Вью не предоставляет инструментов для контроля что за чем происходит. Только какие-то костыли и заплатки (в неимоверных количествах). Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?

[0xD34F]

Что, вот прям всего приложения? Дополнил ответ.

[hckn]

0xD34F, жестко. Но похоже вы правы. Других вариантов нет!

Answer 2

[Владимир]

Есть вариант использования SSR, там как раз можно реализовать запрос к апи с наполнением стора и только после этого начнет загружаться приложение.

Comments

[hckn]

Так вот как раз с SSR и переписываю авторизацию, пытаюсь повторить как там, и тут эта проблема. Вот вам и преимущество SSR на практике. А сначала авторизация с SSR казалась сложнее)

Answer 3

[Andrey]

Может есть смысл использовать Nuxt? Там уже есть нужный вам хук nuxtServerInit, так же можно сделать serverMiddleware, есть много готовых примеров

Comments

[hckn]

Я его и так использую, но вопрос не о Нуксте

[Andrey]

hckn, ну тогда в чем проблема? В fetch вызываете экшен из стора через await и страница не загрузится пока не придет ответ от сервера. Ещё и встроенный прелоадер сам покажется