Skip to content

Vue Navigator firing even the Vuex Dispatch response is pending. #70

Closed
@JacobFJ

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions