vue3 显示loading

Vue 3中显示loading可以通过多种方式实现，通常我们会使用Vue的响应式特性结合组合式 API 来实现一个全局的loading状态管理。以下是一个基本的示例：

首先，我们需要创建一个响应式的变量来跟踪loading状态，通常我们会将其放置在Vuex的store中或者使用Vue的ref来创建。然后，我们可以在需要显示loading的地方进行绑定，使用v-if或者v-show指令来控制loading动画的显示和隐藏。

具体步骤如下：

1. 创建一个响应式变量：

import { ref } from 'vue';

const isLoading = ref(false);

2. 在组件中使用loading状态：

<template>
  <div v-if="isLoading">加载中...</div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const isLoading = ref(false);

onMounted(() => {
  // 请求开始时设置loading为true
  isLoading.value = true;
  store.dispatch('yourAction').finally(() => {
    // 请求结束时设置loading为false
    isLoading.value = false;
  });
});
</script>

3. 在全局状态管理中设置loading状态：
如果你使用Vuex进行状态管理，可以在全局的action中操作这个状态：

// Vuex action
export const fetchSomething = async ({ commit, state }) => {
  commit('setLoading', true); // 开始请求，设置loading状态为true
  try {
    // 你的请求逻辑
    const response = await axios.get('/some-url');
    // 处理响应数据
    // ...
  } finally {
    commit('setLoading', false); // 请求结束，设置loading状态为false
  }
};

// Vuex mutation
export const setLoading = (state, isLoading) => {
  state.isLoading = isLoading;
};

在组件中，你可以通过mapState或者直接从store中获取isLoading状态，并根据这个状态来控制显示加载中的提示。

请注意，实际的实现可能会根据你的应用结构和需求有所不同，但核心思路是使用Vue的响应式系统来控制loading状态。