[Vuejs]-How do you update VUE elements when running a promise

you want a loading in this page, not in all pages, so you’d better manage isLoading locally, no need to put it in the vuex store.

For example, you can add finally to the Promise in your onSubmit method, you can cancel the loading state in that:

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

By the way, vuex is used for global state management, you don’t have to put all the state in it. you should know locale state and global state, otherwise you will get lost in the big, global state map.

For the global state, I think less is better

So how I ended up doing this by using a global state variable to show and hide the progress and updating that variable whenever I action items in the background see code below.

With this method, I can have multiple progress bars on the page and updating specific ones by modifying the code slightly.

Please anyone who knows vue.js well please give opinion or guidance.

<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">{{ k }} {{ v | error.title }}</li> -->
            <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
};