vue create loading component with vuex

const state = {
  loading: false
};

const actions = {
  turnLoading({ commit }: any) {
    commit('setLoading', true);
  },
  offLoading({ commit }: any) {
    commit('setLoading', false);
  }
};

const mutations = {
  setLoading(state: any, value: boolean) {
    state.loading = value;
  }
};

export default { namespaced: true, state, actions, mutations };

<template>
  <div class="loading" v-if="loading">
    <div class="loader-six">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { State } from 'vuex-class';

@Component
export default class Loading extends Vue {
  @State(state => state.app.loading) loading!: boolean;
}
</script>

<style scoped>
.loading {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.6;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  z-index: 9999;
}

.loader-six {
  position: relative;
  width: 60px;
  height: 60px;
}
.loader-six div {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  left: 0;
  top: 10px;
  border: 2px solid #fff;
}
@-webkit-keyframes loader6 {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 0.1;
  }
  20% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }
}
.loader-six div:nth-child(1) {
  -webkit-animation: loader6 0.8s -0.24s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
.loader-six div:nth-child(2) {
  -webkit-animation: loader6 0.8s -0.12s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
.loader-six div:nth-child(3) {
  -webkit-animation: loader6 0.8s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
</style>

<template>
  <component :is="layout">
    <Loading />
    <router-view />
  </component>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { State } from 'vuex-class';
import Loading from '~components/common/loading.vue';

@Component({
  components: {
    Loading
  }
})
export default class App extends Vue {
  @State(state => state.user.islogin)
  islogin!: boolean;

  @Watch('islogin')
  onLogin(value: boolean, preValue: boolean) {
    if (preValue === false && value === true) {
      const router: any = this.$router;
      router.push({ name: 'home' });
    }
  }

  created() {
    const router: any = this.$router;
    if (!this.islogin && router.history.current.name !== 'login') {
      router.push({ path: '/login' });
    }
  }

  get layout() {
    return `default-${this.islogin ? 'layout' : 'blank'}`;
  }
}
</script>

// call at the other state module.
const actions = {
  login({ commit, dispatch }: any, payload: LoginData) {
    commit(USER_LOGIN.REQUEST);
    console.log(dispatch);
    // display loading
    dispatch('app/turnLoading', null, { root: true });
    axios
      .post('/user/login', payload)
      .then(({ data }) => {
        // remove loading
        dispatch('app/offLoading', null, { root: true });
        if (data.status === 'success') commit(USER_LOGIN.SUCCESS, { username: payload.username, ...data.result });
        else commit(USER_LOGIN.FAILURE, data);
      })
      .catch(e => {
        commit(USER_LOGIN.ERROR, e);
        // remove loading
        dispatch('app/offLoading', null, { root: true });
      });
  }
};