如何在pinia使用 ElLoading

在 Pinia 中使用 Element Plus 的 ElLoading 可以通过在组件中引入 ElLoading 组件并在方法内使用 $loading 进行调用。具体步骤如下：

1. 在组件中引入 ElLoading 组件：

<script>
import { ElLoading } from 'element-plus';
</script>

2. 在需要使用 loading 动画的方法内使用 $loading：

methods: {
  async fetchData() {
    const loading = this.$loading({
      target: '.my-target', // 指定 loading 的挂载节点，这里的 '.my-target' 是一个 CSS 选择器
      text: 'Loading...', // loading 文字提示
    });
    try {
      // 这里是异步请求数据的代码
      const res = await fetch('https://api.example.com/data');
      const data = await res.json();
      // 请求成功后，关闭 loading
      loading.close();
      // 处理数据
    } catch (error) {
      // 请求失败后，关闭 loading
      loading.close();
      // 处理错误
    }
  },
},

注意，这里的 $loading 是从 Vue 的实例对象中获取的，因此在组件内部可以直接使用。

另外，如果需要全局使用 loading 组件，可以在 main.js 中通过 Vue.use() 进行注册，在组件中就不用重复引入了。具体代码如下：

import { createApp } from 'vue';
import App from './App.vue';
import { ElLoading } from 'element-plus';

const app = createApp(App);

app.use(ElLoading);

app.mount('#app');

这样，在组件中就可以直接使用 $loading 了。