Vue Navigator firing even the Vuex Dispatch response is pending.

[JacobFJ]

Hello,

I just use this very efficient way of navigation library but I encounter a problem between vuex and this navigation library

Expected to happen: Wait for API response before firing this.$navigator.navigate('thispath')

Current: Once @tap="handleLogin" vuex dispatch will run but vue navigator will fire even the response is pending in dev console

Reproduce:

Login.vue

    handleLogin() {
      if (this.user.mobile && this.user.password) {
        this.$store.dispatch("connect/login", this.user).then(
          () => {
           // running even the response is pending.
            this.$navigator.navigate("/auth/");
           //Testing alert
            alert();
          },
          (error) => {
            alert("Not found");
          }
        );

AuthService.js

  login(user) {
    return axios
      .post(API_URL + 'login', {
        mobile: user.mobile,
        password: user.password
      })
      .then(response => {
        if (response.data) {
          // mock
        }

        return response.data;
      });
  }

Vuex Module

   login({ commit }, user) {
      return AuthService.login(user).then(
        user => {
          commit('loginSuccess', user);
          return Promise.resolve(user);
        },
        error => {
          commit('loginFailure');
          return Promise.reject(error);
        }
      );

Visual Ref:

DevConsole API Request

CLI Output

Thanks