vue和element全局loading

http請求的代碼如下：

import axios from 'axios'
import { Message} from 'element-ui'
import store from '../store' //vuex
import { getToken } from '@/utils/auth' //token

// 創建axios實例

const service = axios.create({
    //baseURL: "https://www.cnblogs.com", // api的base_url
    timeout: 5000 // 請求超時時間
})

//http request 攔截器
service.interceptors.request.use(
 
  
    config => {
      config.headers = {
        'Content-Type':'application/x-www-form-urlencoded',
        'X-Token':getToken()
      }
      if(store.state.neddloding==0){ //等於0打開loading

        store.commit('gbfullscreenLoading')
        
      }
        store.commit('show')//每開始一次請求neddloding加一
        console.log(store.state.neddloding)
      
      return config;
    },
    error => {
      return Promise.reject(err);
    }
  );

//響應攔截器即異常處理
service.interceptors.response.use(response => {
    console.log(response)
    //store.commit('gbfullscreenLoadinga')
    //hide()
    
    return response
}, err => {
    if (err && err.response) {
       
      switch (err.response.status) {
        case 400:
            //console.log('錯誤請求')
            Message({message: '錯誤請求', type: 'error'});
          break;
        case 401:
            console.log('未授權，請重新登錄')
          break;
        case 403:
          console.log('拒絕訪問')
          break;
        case 404:
          console.log('請求錯誤,未找到該資源')
          break;
        case 405:
          console.log('請求方法未允許')
          break;
        case 408:
          console.log('請求超時')
          break;
        case 500:
          console.log('服務器端出錯')
          break;
        case 501:
          console.log('網絡未實現')
          break;
        case 502:
          console.log('網絡錯誤')
          break;
        case 503:
          console.log('服務不可用')
          break;
        case 504:
          console.log('網絡超時')
          break;
        case 505:
          console.log('http版本不支持該請求')
          break;
        default:
          console.log(`連接錯誤${err.response.status}`)
      }
    } else {
      console.log('連接到服務器失敗')
    }
    return Promise.resolve(err.response)
})

var that=this;
function fromdata(type, url, data) {
    return new Promise((reslove, reject) => {
    service({
        method: type,
        url: url,
        data: data //java后台用qs轉
      })
        .then(res => {
         // store.commit('UPDATE_LOADING', false); //隱藏loading
          //這里可以添加指定對應狀態碼的處理方式,比如登陸過期,res.data.code === '6666' 路由跳轉到login
          if(res.data.code==0){
            reslove(res);
            console.log(store.state.neddloding)
              store.commit('hide') //每完成一次請求減一
            if(store.state.neddloding==0){ //等於0關閉loding
              console.log(store.state.neddloding)
              store.commit('gbfullscreenLoadinga')
            }
              
            
          }else{
              console.log(res.data.message)
              console.log(res)
            Message({message: '錯誤請求', type: 'error'});
          }
        })
        .catch(err => {
          //store.commit('UPDATE_LOADING', false); //隱藏loading
          reject(err.message);
          Message({message: '錯誤請求', type: 'error'});
          //Message.error(e.message);
        });
    });
  }
 


export default fromdata

store代碼

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)



var state={
    fullscreenLoading:true,//設置loading是否顯示
    neddloding:0//根據是否為0來判斷是否關閉loading
}

var mutations={
    gbfullscreenLoading(state){
        state.fullscreenLoading=true;//loading顯示
    },
    gbfullscreenLoadinga(state){
        state.fullscreenLoading=false;//loading關閉
    },
    show(state){//每請求一次加一
        state.neddloding++
    },
    hide(state){//每完成請求一次減一
        state.neddloding--
    }

}


export default new Vuex.Store({
    state,
    mutations
})

app.vue中設置loading

<template>
    <div id="app" v-loading.fullscreen.lock="fullscreenLoading">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
   
    computed:{
        fullscreenLoading(){
            return this.$store.state.fullscreenLoading
        }
    }
}
</script>