If you only need a loading feature on this specific page and not on all pages, it's best to handle the isLoading state locally instead of storing it in the vuex store.

One approach is to use the finally method with Promises in your onSubmit function to manage the loading state like so:

onSubmit(email, password) {
  this.isLoading = true;
  this.$store
    .dispatch(LOGIN, { email, password })
    .then(() => this.$router.push({ name: "policies" }))
    .catch((e) => {
      console.log(e);
    }).finally(() => this.isLoading = false);
}

Remember, vuex is designed for managing global states, so be mindful of what states you store there. Understanding the distinction between local and global states will prevent confusion in the long run.

When it comes to global state management, less is often more efficient.

I came up with a clever solution by utilizing a global state variable to toggle the progress bar visibility and updating it whenever there are background actions. You can see the code snippet below for reference.

By implementing this approach, I now have the flexibility to have multiple progress bars on the same page and update specific ones by making minor adjustments to the code.

If anyone proficient in vue.js has any insights or suggestions, please feel free to share them.

<template>
  <div class="auth-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-6 offset-md-3 col-xs-12">
          <h1 class="text-xs-center">Login</h1>
          <p class="text-xs-center"></p>
          <ul v-if="errors" class="error-messages">
            <li v-for="(v, k) in errors" :key="k">{{ v.detail }}</li>
          </ul>
          <form v-on:submit.prevent="onSubmit(email, password);">
            <fieldset class="form-group">
              <input
                class="form-control form-control-lg"
                type="text"
                v-model="email"
                placeholder="Email"
              />
            </fieldset>
            <fieldset class="form-group">
              <input
                class="form-control form-control-lg"
                type="password"
                v-model="password"
                placeholder="Password"
              />
            </fieldset>
            <v-progress-circular
              right
              :size="30"
              color="black"
              indeterminate
              v-show="this.$store.getters.isLoading"
            ></v-progress-circular>
            <button
              class="btn btn-lg btn-primary pull-xs-right"
              style="background:black; border-color:black"
            >
              Login
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { mapState } from "vuex";
import { LOGIN } from "@/store/actions.type";

export default {
  name: "RwvLogin",
  data() {
    return {
      email: null,
      password: null
    };
  },
  methods: {
    onSubmit(email, password) {
      this.$store.commit(SET_LOADING, true);
      this.$store
        .dispatch(LOGIN, { email, password })
        .then(() => this.$router.push({ name: "policies" }));
    }
  },
  mounted() {

  },
  computed: {
    ...mapState({
      errors: state => state.auth.errors
    })
  }
};
</script>

import ApiService from "@/common/api.service";
import JwtService from "@/common/jwt.service";
import {
  LOGIN,
  LOGOUT,
  REGISTER,
  CHECK_AUTH,
  UPDATE_USER
} from "./actions.type";
import { SET_AUTH, PURGE_AUTH, SET_ERROR, SET_LOADING } from "./mutations.type";

const state = {
  errors: null,
  user: {},
  isLoading: false,
  isAuthenticated: !!JwtService.getToken()
};

const getters = {
  currentUser(state) {
    return state.user;
  },
  isLoading(state) {
    return state.isLoading;
  },
  isAuthenticated(state) {
    return state.isAuthenticated;
  }
};

const actions = {
  [LOGIN](context, credentials) {
    return new Promise(resolve => {
      ApiService.post("login", credentials)
        .then(({ data }) => {
          context.commit(SET_AUTH, data.access_token);
          resolve(data);
        })
        .catch(({ response }) => {
          context.commit(SET_LOADING, false);
          if(response.status == 401){
            response.data.errors = [{"status":"401","code":0,"title":"Loginn error","detail":"The password entered is incorrect."}] 
          }
          context.commit(SET_ERROR, response.data.errors);
        });
    });
  },
  [LOGOUT](context) {
    context.commit(PURGE_AUTH);
  },
  [REGISTER](context, credentials) {
    return new Promise((resolve, reject) => {
      ApiService.post("users", credentials)
        .then(({ data }) => {
          context.commit(SET_AUTH, data.access_token);
          resolve(data);
        })
        .catch(({ response }) => {
          context.commit(SET_ERROR, response.data.errors);
          reject(response);
        });
    });
  },
  [CHECK_AUTH](context) {
    if (JwtService.getToken()) {
      // ApiService.setHeader();
      // ApiService.get("user")
      //   .then(({ data }) => {
      //     context.commit(SET_AUTH, data.access_token);
      //   })
      //   .catch(({ response }) => {
      //     context.commit(SET_ERROR, response.data.errors);
      //   });
    } else {
      context.commit(PURGE_AUTH);
    }
  },
  [UPDATE_USER](context, payload) {
    const { email, username, password, image, bio } = payload;
    const user = {
      email,
      username,
      bio,
      image
    };
    if (password) {
      user.password = password;
    }

    return ApiService.put("user", user).then(({ data }) => {
      context.commit(SET_AUTH, data.user);
      return data;
    });
  }
};

const mutations = {
  [SET_ERROR](state, error) {
    state.errors = error;
  },
  [SET_LOADING](state, status) {
    state.isLoading = status;
  },
  [SET_AUTH](state, token) {
    state.isAuthenticated = true;
    state.errors = {};
    state.token = token;
    JwtService.saveToken(state.token);
  },
  [PURGE_AUTH](state) {
    state.isAuthenticated = false;
    state.user = {};
    state.policies = {};
    state.errors = {};
    JwtService.destroyToken();
  }
};

export default {
  state,
  actions,
  mutations,
  getters
};