Vue3使用axios请求拦截器和vuex设置全局loading方式

<template>
  <div>
    <div class="box" v-show="flage">
      <img src="./assets/loading.gif" alt="">
    </div>
    <router-view />
  </div>
</template>
<script>
import store from './store/index'
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    let flage = ref(false)
    return {
      flage,
    }
  },
  computed: {
    newData() {
      return store.state.loading
    }
  },
  watch: {
    newData(newVal) {
      this.flage = newVal

    }
  }
}

</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: rgba(243, 243, 243, 0.3);
  position: absolute;
  z-index: 9999
}

img {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 30%;
}
</style>

import axios from "axios";
import store from '../store'
// 创建axios实例
const service = axios.create({
  baseURL: "/api",
  timeout: 10000,
});


// 请求拦截器
service.interceptors.request.use(
  (config) => {
    store.commit('setLoading',true)
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    store.commit('setLoading',false)    let res = response.data;
    return res;
  },
  (error) => {
    // 对响应错误做点什么：统一进行响应错误的处理
    console.dir(error);
    return Promise.reject(error);
  }
);

export const request = service;

import { createStore } from 'vuex'

export default createStore({
  state: {
    loading: false,
  },
  getters: {},
  mutations: {
    setLoading(state, flage){
      state.loading = flage
    }
  },
  actions: {},
  modules: {},
  plugins: []
})