title: How to stop Vue life cycle from moving on before Vuex actions have completed?
body: <p>In my application, I want to initialize 3 Vuex modules before the rest of the application starts. However, no matter what I try, the code in the Vue instance life cycle hook in which I perform the initialize, moves on before the 3 modules have completed their initialization.</p>
  
  <p>I have added a promise around the code in the Vuex actions that do the initializing, so that I can (a)wait on those in the calling life cycle hook, but it doesn't work.</p>
  
  <p>I have looked at sample Vuex code that uses Axios, and I have to make my code similar to that, but without success.</p>
  
  <p>I tried init call in the "beforeCreate" life cycle hook with "Promise.all(...)", but that still did not fix it.</p>
  
  <p>The code of my main Vue instance looks like this:</p>
  
  <pre><code>new Vue({
    router,
    store,
    async beforeCreate() {
      await this.$store.dispatch('init')
    },
    render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  
  <p>The Vuex store consists of 3 modules, all of which have a 'init' action. The code of action in all 3 modules is the same. Where ever there is "XXX" in the code below, will be a slightly different call for each module; </p>
  
  <pre><code>  init: ({commit, dispatch}) =&gt; {
      return new Promise((resolve, reject) =&gt; {
        console.log('Start of init of XXX');
        Axios.get(`api/xxx`).then(response =&gt; {
          return response.data;
        }, error =&gt; {
          console.log('An error occured: ', error);
          reject(error);
        }).then(data =&gt; {
          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);
        })
      })
    }
  </code></pre>
  
  <p>What I expect is that the "beforeCreate" code waits with moving on until the 3 init action calls have been fully completed (i.e. until all promises have been fulfilled).</p>
  
  <p>What I see, is that the actions are started (I see the "Start of init..." log in the console). But then I see that code in the mounted() function of one of the applications components is started to execute, which it should not, as it will not work correctly if the store has not been fully initialized.</p>