vue3+ts+vite axios 集成antd的全局加载的实现 第八回

概要：因axios自定义封装在了独立的ts文件里，无法像Element-plus的loading的使用那样，在独立的ts文件里引入使用，所以改用基于pinia的store 和 a-spin 指令实现。封装的axios只控制一个可变量，显示 || 影藏。

1.在store 目录下新建一个loading.ts,内容如下

import { defineStore } from 'pinia';

export const  loadingStore = defineStore('loadingStore', {
  state: ()=> ({
 　　 needLoading:false,  // 是否显示全局loading
  }),
  getters: {
    getLoadding(state) {
      return state.needLoading
    }
  },
  actions: {
    setLoading(val:boolean) { 
      this.needLoading=val
    },
  }
})

　　

2.打开App.vue

<script setup lang="ts">
import { loadingStore } from '@/store/loading'
const loadHandler = loadingStore()

</script>

<template>
  <a-spin :spinning="loadHandler.getLoadding" tip="加载中...">
    <router-view />
  </a-spin>
</template>

　　

3.使用pinia的做状态控制，对pinia的use进行改造【注意：原先直接在main.ts 里集成pinia ,创建pinia的实例姿势得换换了】

// 原先的main.ts 集成pinia ，在外部独立的ts文件里使用store的时候会出现各种错误

 import { createPinia } from "pinia";
 const pinia = createPinia();
 app.use(pinia) 

　　

// 接下来改造下，在store目录下新建store.ts ，内容如下
import { createPinia } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia();
pinia.use(piniaPluginPersist);
export default pinia;

　　

// 更改下main.ts里的引入方式
import pinia from '@/store/store';
app.use(pinia)....

　　

4.在自定义封装的axios请求ts里去使用

import pinia from '@/store/store';
import {loadingStore} from '@/store/loading'
const loadHandler=loadingStore(pinia)


// 需要显示的时候
  loadHandler.setLoading(true)

// 不需要显示的时候
  loadHandler.setLoading(false)