如何在vue 3 composition中显示loading gif api

Question

我是 vue 的新手。我想做的是在等待端点 return.

时加载 gif

我正在尝试使用 watchEffect，但我无法弄明白。如果这是正确的方法，我该怎么做？如果不是，我应该用什么来代替？

谢谢

编辑：代码

<template>
    <div class="player-list" :key="playerList.id" v-for="playerList in players.playerLists">
        <PlayerList :playerList="playerList" />
    </div>
</template>

<script>
import getPlayers from "@/composables/getPlayers";
import PlayerList from "@/components/PlayerList";
import { watchEffect } from 'vue';

export default {
    name: 'PlayerLists',
    components: {
        PlayerList
    },
    setup() {

        const { players, error, load } = getPlayers() //request endpoint
        load()

        watchEffect(() => {
            console.log('watch effect function')
        })

        return { players, error }
    }
}
</script>

Answer 1

Vue 应用程序应该是 data-driven。因此，与其依赖效果，不如通过设置数据来改变应用的外观。如果您从端点获取一些数据，可以安全地假设您将把它放在某个地方以在您的应用程序中显示它，例如 Ref.

那么，只要您的 Ref 不是它正在等待变成的数据，为什么不显示您的加载微调器？即，在 [= 时显示 GIF 13=]?

<template>
  <img v-if="data === null" src="./img/loading.gif" alt="Loading" />
  <div v-else>
    <div>Here's the data!</div>
    <pre>{{ data.toString() }}</pre>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(() => {
      // Replace this `fetch` call with whatever your endpoint call may be.
      fetch('./endpoint')
        .then(resp => resp.json())
        .then(json => data.value = json);
    });

    return { data };
  }
};
</script>

这有意义吗？您的应用程序应该为您的数据建模。您可以利用“加载中的 GIF 只应在我们没有数据时显示”这一事实，嗯...只要未设置数据就显示 GIF。

如何在vue 3 composition中显示loading gif api

How to display loading gif in vue 3 composition api

vue.js

vue-composition-api