vue3.2 如何在pinia使用 ElLoading

在 Vue 3.2 中，Element Plus 的 ElLoading 组件的使用方法和 Vue 3.0 是一样的，因为 Pinia 的实现方式并没有发生变化。因此，在 Pinia 中使用 Element Plus 的 ElLoading，可以按照上面 Vue 3.0 的方法进行操作，具体步骤如下：

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

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

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

import { defineComponent } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  setup() {
    const store = useStore();
    const fetchData = async () => {
      const loading = ElLoading.service({
        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();
        // 处理错误
      }
    };

    return {
      fetchData,
    };
  },
});

注意，这里的 ElLoading.service() 方法返回的是一个 Loading 实例，需要通过该实例的 close() 方法来关闭 loading。

另外，如果需要全局使用 loading 组件，可以在 main.js 中通过 app.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 了。