vue loading方法

Vue.js中，`loading`方法通常用于处理组件加载状态的管理。它常用于数据请求之前显示加载动画或者加载提示，当数据加载完成后再隐藏这个状态。Vue中并没有直接内置的`loading`方法，但你可以通过以下几个步骤来实现：

1. **自定义组件**：创建一个名为`Loading`或者`LoadingIndicator`的组件，比如用`v-if`或`v-show`指令来控制其展示与否。

<template>
  <div v-if="isLoading">
    <span class="loading-icon"></span>
    <span>正在加载...</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  // 在需要加载数据的地方设置isLoading为true
  methods: {
    fetchData() {
      this.isLoading = true;
      // 当数据请求完成，将isLoading设回false
      axios.get('/api/data').then(() => (this.isLoading = false));
    },
  },
};
</script>

2. **Vuex**：如果需要在整个应用中统一管理加载状态，可以考虑使用状态管理模式如Vuex，将`isLoading`状态存储在store中并提供相应的actions来进行改变。

3. **axios拦截器**：对于基于axios的数据请求，可以在axios的全局配置中添加一个请求拦截器来显示和隐藏加载状态。

import axios from 'axios';
import store from './store';

axios.interceptors.request.use((config) => {
  if (store.state.isLoading) {
    config.cancelToken = new axios.CancelToken((c) => {
      store.commit('SET_LOADING', false);
    });
    store.commit('SET_LOADING', true);
  }
  return config;
}, (error) => Promise.reject(error));