@hckn

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

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

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

UPD: В хуке App.vue - это не подходит, т.к. страница загружается не дождавшись конца запроса.
Но куда?
  • Вопрос задан
  • 481 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

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

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

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

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

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

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

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@99percent
Frontend-разработчик
Есть вариант использования SSR, там как раз можно реализовать запрос к апи с наполнением стора и только после этого начнет загружаться приложение.
Ответ написан
@Andrew-Bogdanov
Может есть смысл использовать Nuxt? Там уже есть нужный вам хук nuxtServerInit, так же можно сделать serverMiddleware, есть много готовых примеров
Ответ написан
Ваш ответ на вопрос

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

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