Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题

需求：在发送请求的时候需要给全局加loading样式，初步实现在App.vue中直接包裹整个router-view，然后监听vuex中的值，值在封装axios的时候，即请求拦截以及响应请求的时候改变

App.vue

    <div id="app">
      <a-spin :spinning="LOADING_PAGE" size="large">
        <router-view />
      </a-spin>
    </div>
  setup() {
    const store = useStore();
    const LOADING_PAGE = computed(() => {
      return store.getters.LOADING_PAGE;
    });
    return { LOADING_PAGE};
  },

request.ts

// 请求拦截
service.interceptors.request.use((config) => {
    store.commit("MDF_LOADING_PAGE", true);
}
// 响应拦截（以及失败也要更改MDF_LOADING_PAGE）
service.interceptors.response.use((response) => {
	store.commit("MDF_LOADING_PAGE", false);
}

问题：如果在Modal中也有table列表请求的时候，Modal的层级可能会覆盖loading
所以我们需要两个loading，分别用在全局和Modal中，然后我们写两个值分别控制这个loading样式，然后在Modal中就不需要全局的loading，我们在request.ts更改一下即可

// 请求拦截
service.interceptors.request.use((config) => {
   if (!store.getters.LOADING_MODAL) {
    store.commit("MDF_LOADING_PAGE", true);
  }
}
// 响应拦截（以及失败也要更改MDF_LOADING_PAGE）
service.interceptors.response.use((response) => {
	store.commit("MDF_LOADING_PAGE", false);
	store.commit("MDF_LOADING_MODAL", false);
}

Modal页面

  <a-spin :spinning="LOADING_MODAL" size="large">
	...
  </a-spin>
  setup() {
    const store = useStore();
    const LOADING_MODAL= computed(() => {
      return store.getters.LOADING_MODAL;
    });
    return { LOADING_MODAL};
  },