以 Vue 3 项目为例，多个请求下如何全局封装 Loading 的展示与关闭？其中大有学问！

大家好，我是CodeQi！ 

项目开发中，Loading 的展示与关闭是非常关键的用户体验设计。

当我们的应用需要发起多个异步请求时，如何有效地管理全局 Loading 状态，保证用户在等待数据加载时能有明确的反馈，这是一个值得深入探讨的问题。

本文将以 Vue 3 项目为例，详细讲解如何全局封装 Loading 的展示与关闭。

一、准备工作

首先，我们需要创建一个新的 Vue 3 项目。如果你还没有安装 Vue CLI，请先安装：

npm install -g @vue/cli

然后创建并进入新项目：

vue create loading-demo
cd loading-demo

确保你的项目中已经安装了 Vue 3 和 Vue CLI。

我们将使用 <script setup> 的写法来实现全局 Loading 组件。

二、封装全局 Loading 组件

1. 创建全局 Loading 组件

首先，我们在 src/components 目录下创建一个名为 GlobalLoading.vue 的组件文件：

<!-- src/components/GlobalLoading.vue -->
<template>
  <div v-if="visible" class="global-loading">
    <div class="spinner"></div>
  </div>
</template>

<script setup>
import { ref }from'vue'

// 定义一个可响应的变量来控制 Loading 的可见性
const visible =ref(false)

// 导出显示和隐藏 Loading 的方法
exportconstshowGlobalLoading=()=>{ visible.value=true}
exportconsthideGlobalLoading=()=>{ visible.value=false}
</script>

<style scoped>
.global-loading {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
background:rgba(