vue.js - 如何加载 JSON 配置文件并让 Vue 应用程序等待它？

Question

我的典型场景是:

• 一个 Vue 应用程序(用 webpack 打包，顺便说一句)
• 用于配置应用程序的单独配置文件

配置文件应该不包含在 webpacked 部署包中，因为它依赖于服务器(数据库凭据等)

出于某种原因，我不打算在这里详细说明，我将配置保存在一个 JSON 文件中。

那么问题是:

如何延迟“启动”Vue 应用程序，直到从后端加载(和解析)JSON 配置文件？

我知道如何加载和解析，但对我来说问题是特定于 Vue 的:在开始整个事情之前“等待”某事的最佳做法是什么？

(像 App.vue 组件中的 beforeCreate 生命周期 Hook 是可行的方法吗？它是否适合异步任务，例如通过网络加载 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();
  }
});