title: Vuex: How to wait for action to finish?
body: <p>I want to implement a login method. My code for it is :</p>
  
  <pre><code>login() {
    let user = {
      email: this.email,
      password: this.password
    };
  
    this.$store.dispatch('auth/login', user)
    console.log(this.$store.getters['auth/getAuthError'])
  },
  </code></pre>
  
  <p>Where I reach the store and dispatch the login action. </p>
  
  <p>the action in the store looks like this:</p>
  
  <pre><code>login(vuexContext, user) {
          return axios.post('http://localhost:8000/api/user/login', user)
          .then(res =&gt; {
              vuexContext.commit('setToken', res.data.token)
              vuexContext.commit('setUser', res.data, {root: true})
              localStorage.setItem('token', res.data.token)
              Cookie.set('token', res.data.token )
              this.$router.push('/')
          }).catch(err =&gt; {
              vuexContext.commit('setAuthError', err.response.data)
          })
      },
  </code></pre>
  
  <p>In the catch block, if an error happens, I update the state and set <code>authError</code> property to the error i get.</p>
  
  <p>My problem is that, in the login method, the <code>console.log</code> statement is executed before the action is actually finished so that the <code>authError</code> property is the state has not been set yet. 
  How to fix this issue ?</p>