Как я могу загрузить файл конфигурации JSON и позволить приложению Vue ждать этого?

Question

Типичный сценарий для меня:

• приложение Vue (упаковано в веб-пакет, кстати)
• отдельный файл конфигурации для настройки приложения

Файл конфигурации должен не быть включен в пакет веб-развертывания, поскольку он зависит от сервера (учетные данные базы данных и т. Д.)

По какой-то причине я не собираюсь подробно останавливаться здесьЯ сохраняю конфигурацию в файле JSON.

Итак, вопрос:

Как я могу задержать"запуск" приложения Vue до тех пор, пока не будет загружен файл конфигурации JSON(и проанализировал) из бэкэнда?

Я знаю, как загружать и анализировать, но вопрос для меня специфичен для Vue: как лучше всего «подождать» чего-то перед тем, как начать все это?

(Является ли что-то вроде beforeCreate ловушки жизненного цикла в компоненте App.vue подходящим способом? Хорошо ли это работает с асинхронными задачами, такими как загрузка файла JSON по сети?)

Answer 1

Один из способов, который я использовал для решения этой проблемы, - это использование router.beforeEach. Вот пример моего кода:

router.beforeEach(async (to, from, next) => {
  if (!store.state.initialized) {
    // the store initialize will set initialized to true
    await store.dispatch('initialize')
  }
  // if user not logged in or the route is not public
  if (!store.state.user && !to.meta.public) {
    next('/login')
  } else {
    next();
  }
});