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)

  

 

posted @ 2023-06-13 11:21  大楚打码人  阅读(165)  评论(0编辑  收藏  举报