vue-cli3 添加loading组件

1：创建loading.vue

<template>
    <div class="loading" v-show="isShowLoading">
        <img src="../../common/image/loading.gif" alt="">
        <!-- <p class="desc">{{title}}</p> -->
    </div>
</template>

<script>
import {mapState} from "vuex";
    export default {
         props:{
             title:{
                 type:String,
                 default:'正在载入...'
             }
         },
         computed:{
            ...mapState(["isShowLoading"])
         }
    }
</script>

<style scoped lang="stylus">
 .loading
    width 100%
    text-align center
    position fixed
    left 50%
    top 50%
    transform translate(-50%)
    img 
      width 200px
      height 120px
    .desc
      line-height 20px
      font-size $font-size-small
      color $color-text-1
</style>

2:在APP.vue中引入组件

<template>
  <div>
    <Mloading/>
  </div>
</template>

<script>
import Mloading from "components/loading/loading"

export default {
  components: {
    Mloading
  }
};
</script>

<style lang='stylus' scoped>

</style>

3:在vuex中state.js中定义 isShowLoading=false

4：在ajax.js 决定显示或者隐藏

import axios from 'axios'
import qs from 'qs';
import store from "../store/"

// axios.defaults.baseURL = '/api';
// 是否添加请求头 // 全局请求头添加
// axios.defaults.headers.common['Authorization'] = '1234';
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

const loadingQueue = {};  //loadingd队列

// 请求发送前数据拦截拦截器   => 全局请求拦截
axios.interceptors.request.use(function(config) {
    /* TODOS使用store进行loading添加 */
    config.data = qs.stringify(config.data)
        // console.log('loading开始');
    if (Object.keys(loadingQueue).length == 0) {
        store.state.isShowLoading = true  //改变为true
    }
    loadingQueue[config.url] = true
    return config;
}, function(error) {
    return Promise.reject(error);
})

// 请求成功数据拦截器      =>   全局请求拦截
axios.interceptors.response.use(function(response) {
    /* TODOS 使用store进行loading方法解除 */
    // console.log('loading结束');
    delete loadingQueue[response.config.url];  //删除路径 
    if (Object.keys(loadingQueue).length == 0) {
        store.state.isShowLoading = false  //改变为false
    }
    return response.data;
}, function(error) {
    return Promise.reject(error);
})


export default function({ params = null, url = '', type = 'get' }) {
    let data = (type == 'get' || type == 'delete') ? { params } : params;
    return new Promise((resolve, reject) => {
        axios[type](url, data).then(resolve).catch(reject)
    })
}