定义全局loding

src/App.vue

@@ -1,9 +1,17 @@
 <template>
-  <RouteCache />
+	<RouteCache />
+	<div id="loading" v-if="!loading">
+		<van-loading size="10rem" color="#0094ff"/>
+	</div>
 </template>
 
 <script setup lang="ts">
 import RouteCache from '@/components/RouteCache.vue'
+import { computed } from 'vue'
+import { useOverallStore } from '@/stores'
+
+const overallStore = useOverallStore()
+const loading = computed(() => overallStore.loading)
 </script>
 
 <style lang="less">
@@ -41,4 +49,16 @@ import RouteCache from '@/components/RouteCache.vue'
 	}
 	/* touch-action: none; */
 }
+#loading {
+	position: fixed;
+	z-index: 999999999;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
 </style>

src/main.ts

@@ -13,6 +13,7 @@ import 'vant/lib/index.css'
 import { Locale } from 'vant';
 import enUS from 'vant/es/locale/lang/en-US';
 Locale.use('en-US', enUS);
+import { Loading } from 'vant';
 
 
 import flexible from "./utils/flexible.js";
@@ -32,6 +33,7 @@ document.addEventListener('touchend', function(event) {
 const app = createApp(App)
 app.use(router)
 .use(store)
+.use(Loading)
 .component("SvgIcon", SvgIcon)
 .mount('#app')
 

src/stores/index.ts

@@ -5,4 +5,5 @@ const store = createPinia()
 // 使用持久化插件(全局持久化)
 store.use(createPersistedState())
 export default store
-export * from './modules/generate'
+export * from './modules/generate'
+export * from './modules/overall'

src/stores/modules/overall.ts

@@ -0,0 +1,19 @@
+// 每一个存储的模块，命名规则use开头，store结尾
+import { defineStore } from 'pinia'
+export const useOverallStore = defineStore({
+  id: 'overall', // 必须指明唯一的pinia仓库的id
+  state: () => {
+    return {
+		loading:false,
+    }
+  },
+  getters: {
+    // doubleCount: (state) => state.num * 2
+  },
+  actions: {
+	// 全局loading
+	setLoading(data:boolean){
+		this.loading = data
+	}
+  }
+})