title: How to use async/await in vue lifecycle hooks with vuex?
body: <p>When I dispatch an action in App.vue component in mounted() lifecycle hook, it runs after other components load. I am using  async/await in my action and mounted lifecycle hook.</p>
  <p>App.vue file</p>
  <pre><code>methods: {
     ...mapActions({
        setUsers: &quot;setUsers&quot;,
     }),
  },
  async mounted() {
          try {
              await this.setUsers();
          } catch (error) {
              if (error) {
                  console.log(error);
              }
          }
      },
  </code></pre>
  <p>action.js file:</p>
  <pre><code>async setUsers(context) {
          try {
              const response = await axios.get('/get-users');
   
              console.log('setting users');
   
              if (response.data.success) {
                  context.commit('setUsers', {
                      data: response.data.data,
                  });
              }
          } catch (error) {
              if (error) {
                  throw error;
              }
          }
      },
  </code></pre>
  <p>In Users list component, I need to get users from vuex. So I am using mapGetters to get Users list.</p>
  <pre><code>...mapGetters({
              getUsers: &quot;getUsers&quot;,
          }),
      mounted() {
              console.log(this.getUsers);
      },
  </code></pre>
  <p>But the problem is &quot;<strong>setting users</strong>&quot; console log in running after console logging the <code>this.getUsers</code>.</p>
  <p>In Users list component, I can use <strong>getUsers</strong> in the template but when I try to console log <strong>this.getUsers</strong> it gives nothing.</p>
  <p>How can I run <code>app.vue</code> file before running any other components?</p>