前端进阶：活用Vue3实现全局Loading封装与控制

在现代Web开发中，应用程序通常需要处理大量异步请求。为了向用户提供更好的体验，我们经常需要在请求期间显示Loading状态，以表明应用程序正在工作。然而，当有多个请求同时发生时，管理Loading状态变得更加复杂。

在Vue3中，我们可以使用一个全局的Loading组件来管理所有请求的状态。这个组件可以监听所有请求的开始和结束，并在适当的时候显示或隐藏Loading状态。下面是一个实现全局Loading封装的步骤：

1. 创建一个全局Loading组件

// GlobalLoading.vue
<template>
  <div v-if="loading" class="loading">
    <div class="loading-icon"></div>
    <div class="loading-text">Loading...</div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const loading = ref(false)

    const showLoading = () => {
      loading.value = true
    }

    const hideLoading = () => {
      loading.value = false
    }

    return {
      loading,
      showLoading,
      hideLoading
    }
  }
}
</script>

2. 在App.vue中注册全局Loading组件

// App.vue
import GlobalLoading from './components/GlobalLoading.vue'

export default {
  components: {
    GlobalLoading
  }
}

3. 在需要的地方使用全局Loading组件

// MyComponent.vue
<template>
  <div>
    <button @click="loadData">Load Data</button>
    <global-loading v-if="loading" />
  </div>
</template>

<script>
import { ref } from 'vue'
import { GlobalLoading } from '@/components'

export default {
  components: {
    GlobalLoading
  },
  setup() {
    const loading = ref(false)

    const loadData = async () => {
      loading.value = true
      await fetch('https://example.com/api/data')
      loading.value = false
    }

    return {
      loading,
      loadData
    }
  }
}
</script>

通过以上步骤，我们就可以在Vue3项目中轻松实现全局Loading的封装和控制。当有多个请求同时发生时，Loading状态将根据请求的数量自动显示或隐藏。这可以大大提高用户体验，并让您的应用程序看起来更加专业。