vuex storage loading loading

A set of high-quality UI component library iView based on Vue.js

loading.vue 

<template>
  <div class="loading">
    <Spin fix size="large"></Spin>
  </div>

</template>

<script>
  import { Spin } from 'iview'
    export default {
        name: "loading"
    }
</script>

<style lang="stylus">
  .loading{
    background #fff;
    opacity 0.5;
    width: 100%;
    height: 100%;
    position absolute;
    top:0;
    left:0;
    right:0;
    bottom :0;
    z-index 9999;

  }
</style>

 

1.loading.js

const loading = {
  state:{
    isLoading:false,
    showModal:true
  },
  mutations:{
    BEGIN_LOADING(state){
      state.isLoading = true
    },
    END_LOADING(state){
      state.isLoading = false
    },
    MODAL_LOADING(state){
      state.showModal = false
    }
  },
  actions:{
    beginLoading({ commit }){
      commit('BEGIN_LOADING')
    },
    endLoading({ commit }){
      commit('END_LOADING')
    },
    modalLoading({ commit }){
      commit('MODAL_LOADING')
    }
  }
};
export default loading

2. Introduce store/index.js: You can also put loading.js directly into the store instead of independent of loading.js, according to your needs

import Vue from 'vue';
import Vuex from 'vuex';
import loading from './loading';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    loading
  }
});
export default store

3.main.js introduces the store file:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
...

//挂载
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

 

4. Axios data request response interception use: 

import axios from 'axios';
import store from './store';
import router from './router'
axios.interceptors.request.use((config)=>{
   ......
  //携带token

  store.dispatch('beginLoading');
  return config
});
axios.interceptors.response.use((config)=>{

  ......
  store.dispatch('endLoading');
  //获取token,验证，跳转
  return config
})

Used in component container.vue: loading is called when exiting

<template>
  <div>
    <div class="logout" @click="logout">退出</div>
    <loading v-if="this.$store.state.loading.isLoading" v-show="this.$store.state.loading.showModal"></loading>
  </div>
</template>
<script>
    import loading from '../components/loading'
    export default {
        name: "container",
        components:{
          loading
        },
        methods:{
          logout(){
            this.$Modal.confirm({
                  content: "确认退出吗？",
                  closable:true,
                  cancelText:"取消",
                  okText:"确定",
                  loading: true,
                  onOk:()=>{
                    this.$store.dispatch('modalLoading');
                    axios.get('/api/logout').then(res=>{
                          console.log(res)
                          if(res.data.result){
                            sessionStorage.clear();
                            this.$Modal.remove();
                            this.$Message.info('退出成功');
                            localStorage.removeItem('xAuthToken');
                            this.$router.push('/login')
                          }
                    })
                  },
                  onCancel:()=>{}
            });

      },
    }
</script>

Since there is no loading component called before on the page, add it again.