title: Vuex function execute before the other
body: <p>I am using <strong>Vue + Vuex</strong> to delete the user token from <strong>localStorage</strong> to make the user logout and redirect them to login page.</p>
  
  <blockquote>
    <p>Component logout method Code:</p>
  </blockquote>
  
  <pre><code>methods: {
        logout () {
          this.$store.dispatch('logout')
            .then(response =&gt; {
              this.$router.push({ name: 'login'});
            }).catch((e) =&gt; {
              console.log(e);
            });
        }
      }
  </code></pre>
  
  <blockquote>
    <p>Store action code:</p>
  </blockquote>
  
  <pre><code>logout({commit}) {
      return new Promise((resolve, reject) =&gt; {
        try {
          commit('logout');
          resolve("done");
        } catch (e) {
          reject(e);
        }
      });
    }
  </code></pre>
  
  <blockquote>
    <p>Store Mutation function:</p>
  </blockquote>
  
  <pre><code>logout (state) {
      localStorage.removeItem('user');
      state.is_logged_in = false;
      state.user = null;
    }
  </code></pre>
  
  <blockquote>
    <p>Problem is:</p>
  </blockquote>
  
  <p>What happen is:</p>
  
  <ol>
  <li>User redirect to Login page.</li>
  <li>User redirect back to dashboard.</li>
  <li>User access token is removed.</li>
  </ol>
  
  <p>So the user stay in the same page.</p>
  
  <blockquote>
    <p>This means:</p>
  </blockquote>
  
  <p>The action method is dispatched then it returns back to the component logout method then it commit the mutation.</p>