Nuxt Vue3 首次打开网站时加载动画，直到获取所有内容

Question

我正在构建一个网站，我正在一些滚动组件中获取一些数据，但我想要一个加载屏幕，当有人打开网站时，直到一切都完成，这样他们就不会一一加载（页面看起来不太好，有空白空间，我真的不想要使用占位符还为每个滚动组件显示多个加载动画看起来不太好）。

如：进入网站 --- 显示全页动画（如页面中间的我的徽标和加载动画） -- API 加载了所有内容 --- 进入主页。

它加载得非常快，就像我现在做的那样，但我什至不确定我是否应该在 onMounted 中调用 initGetBooks() （或者如果它是我这样做的一个很好的做法），当我确实调用 onMounted 时，它也是如此对于我这样的人来说很慢。我对此有点菜鸟，我对react-native有一些经验。

我用它来获取数据 atm:

// composables/useAPIFetch.ts

import axios from 'axios'

export const useAPIFetch = () => {
  const baseURL = 'http://localhost:2222'
 // const storeUser = useStoreUser()
  const token = 'sometoken'
  
  return axios.create({
    baseURL,
   // mode: 'no-cors',
    headers: {
      Authorization: `Bearer ${token}`,
    }
  })
}

// components/Latest.vue
--- ...
                <div data-slide-recent @scroll="initScroll()" class="flex items-stretch gap-5 overflow-hidden overflow-x-auto invisible-scroll">
                    <template v-for="book in books">
                        <div class="w-11/12 min-w-[91.666667%] xs:w-80 xs:min-w-[20rem] md:w-1/3 md:min-w-[33.333333%] lg:w-1/4 lg:min-w-[25%]">
                            <CardsRecentPod :key="book.id" :title="book.media.metadata.title ? `${book.media.metadata.title} - ${book.media.metadata.authorName}` : ''" :duration="secondsToHoursAndMinutes(book.media.duration)" :href="'http://localhost:3333/item/' + book.id" :cover-image="book.media.coverPath ? 'http://localhost:3333/api/items/' + book.id + '/cover?token=sometoken' : 'http://localhost:2222/placeholder_cover.jpg'" />
                        </div>
                    </template>
</div>
----- ...
<script lang="ts" setup >
const api = useAPIFetch(
const books = ref<any[]>([]);

async function initGetBooks(): Promise<void> {
    const { data: libInfo } = await api({
        method: 'post',
        url: '/api/authorize'
    })

    const { data: booksInfo } = await api({
        method: 'get',
        url: '/api/libraries/' + libInfo.userDefaultLibraryId + '/items?limit=8&sort=addedAt&desc=1'
    })
    books.value = booksInfo.results
}


let element: HTMLDivElement
if (typeof document !== "undefined") {
    element = document.querySelector("[data-slide-recent]") as HTMLDivElement
}
async function initScroll(this: any): Promise<void> {
    if (typeof element === "undefined" || element === null) {
        return
    }

    prevIsVisible.value = element.scrollLeft <= 0 ? false : true
    nextIsVisible.value = element.scrollLeft >= element.scrollWidth - element.offsetWidth - 1 ? false : true
}

function scrollToLeft(): void {
    if (typeof element === "undefined" || element === null) {
        return
    }
    element.scrollLeft -= element.clientWidth
}

function scrollToRight(): void {
    if (typeof element === "undefined" || element === null) {
        return
    }
    element.scrollLeft += element.clientWidth
}

await initGetBooks()

onMounted(() => {
    if (window !== null) {
        initScroll()
    }
})

</script>

非常感谢任何建议。

我尝试使用 NuxtLoadingIndicator 和一些东西，但没有运气。

Answer 1

我认为你可以尝试使用nuxt的数据获取方法，例如

useFetch()

，

$fetch()

和

useAsyncData()

。因为这些方法提供了

pending

值，所以您可以使用它来处理加载状态。

使用

useFetch()

的示例：

<script setup>
const { pending, data: posts } = useFetch('/api/posts', {
  lazy: true
})
</script>

<template>
  <!-- you will need to handle a loading state -->
  <div v-if="pending">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

访问Nuxt 的数据获取了解更多详情