如何在 Vuex 操作完成之前阻止 Vue 生命周期继续进行？

在我的应用程序中，我想在应用程序的其余部分启动之前初始化 3 个 Vuex 模块。然而，无论我如何尝试，Vue 实例生命周期挂钩中执行初始化的代码都会在 3 个模块完成初始化之前继续运行。

我在执行初始化的 Vuex 操作中的代码周围添加了一个承诺，以便我可以 (a) 等待调用生命周期挂钩中的代码，但它不起作用。

我查看了使用 Axios 的示例 Vuex 代码，我必须使我的代码与此类似，但没有成功。

我尝试使用“Promise.all(...)”在“beforeCreate”生命周期挂钩中进行 init 调用，但这仍然没有解决问题。

我的主 Vue 实例的代码如下所示：

new Vue({
  router,
  store,
  async beforeCreate() {
    await this.$store.dispatch('init')
  },
  render: h => h(App)
}).$mount('#app')

Vuex 存储由 3 个模块组成，所有模块都有一个“init”操作。所有 3 个模块中的操作代码都是相同的。下面的代码中凡是有“XXX”的地方，每个模块的调用都会略有不同；

  init: ({commit, dispatch}) => {
    return new Promise((resolve, reject) => {
      console.log('Start of init of XXX');
      Axios.get(`api/xxx`).then(response => {
        return response.data;
      }, error => {
        console.log('An error occured: ', error);
        reject(error);
      }).then(data => {
        const result = [];
        for (let key in data) {
          result.push(data[key]);
        }

        console.log('The API call resulted in ' + result.length + ' lines of code');

        resolve(result);
        commit('ADD_XXX', result);
      })
    })
  }

我期望的是“beforeCreate”代码等待继续，直到 3 个 init 操作调用完全完成（即直到所有承诺都得到履行）。

我看到的是操作已启动（我在控制台中看到“Start of init...”日志）。但后来我看到应用程序组件之一的 Mounted() 函数中的代码开始执行，但它不应该执行，因为如果存储尚未完全初始化，它将无法正常工作。

你不能暂停beforeCreate通过制作它async。当您点击时，它可能看起来在内部“暂停”await但从外部角度来看，它只是返回一个承诺。 Vue 不会注意到返回值，因此承诺将被忽略，生命周期将不间断地继续。你可以做的就是添加一些状态到你的data并操纵它以达到预期的效果：

new Vue({
  router,
  store,
  data () {
    return {
      ready: false
    }
  },
  async beforeCreate() {
    await this.$store.dispatch('init')
    this.ready = true
  },
  render (h) {
     if (this.ready) {
       return h(App)
     }
  }
}).$mount('#app')

顺便说一句，您不需要创建新的承诺init，您只需返回 axios 创建的链式 Promise 即可。

Update:

还有另一种方法，就是不打电话mount.

new Vue({
  router,
  store,
  async beforeCreate() {
    await this.$store.dispatch('init')
    this.$mount('#app')
  },
  render: h => h(App)
})