如何在不通过 axios 加载数据的情况下在 nuxt 中使用 "Vue-infinite-loading"？

Question

我正在开发一个Nuxt应用程序。对于我的一个动态页面，我想用无限滚动来显示数据。为此，我决定使用Vue无限加载。我阅读了这篇文章，还浏览了Vue无限加载的文档。在这两种情况下，他们都使用axios模块逐步加载数据，以便在滚动到达页面中的特定点时显示在页面中。但在我的页面中，在$strapi模块和Nuxtfetch钩子的帮助下，根据页面id，数据已经存在于页面中。我页面的整个代码如下：

<template>
<v-container fluid>
<v-row>
<v-col cols="10" class="mx-auto">
<p v-if="$fetchState.pending">
در حال بارگذاری اطلاعات
</p>
<p v-else-if="$fetchState.error">
مشکلی در نمایش اطلاعات به وجود آمده است.
</p>
<div v-else>
<h1 v-html="this.fourType[this.nameRoute]['title']">
</h1>
<section>
<BaseCard 
v-for="item in listShow"
:key="item.id"
:imgId = "item.id" 
:sizeCard = "270"
>
<template v-slot:tozih>
{{ item.tozih }}
</template> 
<template v-slot:aout>
{{ item.author }}
</template>  
</BaseCard>
</section>

<infinite-loading 
spinner="spiral"
@infinite="infiniteScroll"
>
</infinite-loading>

</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
listBooks: [],
fourType:{
short: {
title: "در این قسمت می&zwnj;توانید کتابها را به ترتیب از کوچک (کمترین تعداد صفحه) به بزرگ (بیشترین تعداد صفحه) مشاهده نمایید:",
request: 1
},
programming: {
title: "در این قسمت می&zwnj;توانید کتب مرتبط با برنامه&zwnj;نویسی (دارای برچسب برنامه&zwnj;نویسی) را به ترتیب به روزرسانی (از جدیدترین به قدیمی&zwnj;ترین) مشاهده نمایید:",
request: 2
},
new: {
title: "در این قسمت می&zwnj;توانید کتب موجود در سایت را به ترتیب به روز رسانی (از جدید به قدیم) مشاهده نمایید:",
request: 3
},
random: {
title: "در این قسمت می&zwnj;توانید به صورت تصادفی به مشاهده تمامی کتب موجود در سایت بپردازید:",
request: 4
}
},
nameRoute: this.$route.params.type
}
}, // end of data
computed: {
listShow: function() {
return [ this.listBooks[0], this.listBooks[1] ]
}
}, // end of computed
methods: {
infiniteScroll($state) {

if (this.listBooks.length > 1) {
this.listBooks.forEach((item) => this.listShow.push(item))
$state.loaded()  
} 
else {   
$state.complete()  
} 

}
}, // end of methods
async fetch() {
switch (this.nameRoute) {
case "short":
this.listBooks = await this.$strapi.$books.find("_sort=pageQuantity:ASC");
break;
case "programming":
this.listBooks = await this.$strapi.$books.find({ 'tags.name': ['برنامه نویسی'], _sort: 'updated_at:DESC' });
break;
case "new":
this.listBooks = await this.$strapi.$books.find("_sort=updated_at:DESC");
break;
default:
this.listBooks = this.$store.getters["books/randomBook"](this.$store.state.books.list2.length);
break;
}

}
}
</script>
<style scoped>
</style>

在代码中，我在fetch hook中获取数据(根据页面id不同(，然后将其放入listBooksVue数据中。我想做的是，例如，首先显示listBooks中的2数据，当滚动到第二个数据(此处为第二张卡(的末尾时，我使用无限滚动方法逐步显示其余数据。因此，我使用了一个名为listShow的计算数据，并在v-for中使用了它。然后我把我认为它可能在infiniteScroll方法中工作的代码放进去。但显然，这是行不通的，因为我只是猜测。如果有人知道如何更改代码并在无限滚动中显示数据，请帮助我解决这个问题。

Answer 1

通常，无限加载程序用于拥有一小部分数据，然后出于性能原因进行扩展：不必一次加载100个元素，而是加载10个，然后再加载10个等等

如果你已经在本地一次拥有了数据，并且喜欢它的行为，而没有任何"；分页"；从Strapi后端需要，您可以随时关注@infinite事件，并通过下一个事件增加初始元素数组的大小。

也就是说，如果你显示了其中的10个，想要向下滚动并再显示10个：显示前10个，然后当触发infinite事件时，在你的初始数组中再追加10个项目，以此类推

我之前的回答可能有助于进一步理解它。

PS：在处理数组时，要注意可能有一天会遇到的一些反应性问题。

Answer 2

我终于在kissu答案的帮助下，在问题中提到的文章代码的启发下找到了解决方案。在这里，我将发布我的整个Nuxt页面的代码，以显示使用其他开发人员的答案：

<template>
<v-container fluid>
<v-row>
<v-col cols="10" class="mx-auto">
<p v-if="$fetchState.pending">
در حال بارگذاری اطلاعات
</p>
<p v-else-if="$fetchState.error">
مشکلی در نمایش اطلاعات به وجود آمده است.
</p>
<div v-else>
<h1 v-html="this.fourType[this.nameRoute]['title']">
</h1>
<section>
<BaseCard 
v-for="item in list2"
:key="item.id"
:imgId = "item.id" 
:sizeCard = "270"
>
<template v-slot:tozih>
{{ item.tozih }}
</template> 
<template v-slot:aout>
{{ item.author }}
</template>  
</BaseCard>
</section>

<infinite-loading 
spinner="spiral"
@infinite="infiniteScroll"
>
</infinite-loading>

</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {
listBooks: [],
page: 0,
list2: [],
fourType:{
short: {
title: "در این قسمت می&zwnj;توانید کتابها را به ترتیب از کوچک (کمترین تعداد صفحه) به بزرگ (بیشترین تعداد صفحه) مشاهده نمایید:",
request: 1
},
programming: {
title: "در این قسمت می&zwnj;توانید کتب مرتبط با برنامه&zwnj;نویسی (دارای برچسب برنامه&zwnj;نویسی) را به ترتیب به روزرسانی (از جدیدترین به قدیمی&zwnj;ترین) مشاهده نمایید:",
request: 2
},
new: {
title: "در این قسمت می&zwnj;توانید کتب موجود در سایت را به ترتیب به روز رسانی (از جدید به قدیم) مشاهده نمایید:",
request: 3
},
random: {
title: "در این قسمت می&zwnj;توانید به صورت تصادفی به مشاهده تمامی کتب موجود در سایت بپردازید:",
request: 4
}
},
nameRoute: this.$route.params.type
}
}, // end of data
methods: {
infiniteScroll($state) {
setTimeout(() => {    
let emptyArr = [];
for (let index = this.page*10; index < this.page*10+10; index++) {
if (this.listBooks[index]) {
emptyArr.push(this.listBooks[index])
}
}

if (emptyArr.length > 0) {
emptyArr.forEach(
(item) => this.list2.push(item)
)
$state.loaded();
} else {
$state.complete()
}
this.page++
}, 500)            

}
}, // end of methods
async fetch() {
switch (this.nameRoute) {
case "short":
this.listBooks = await this.$strapi.$books.find("_sort=pageQuantity:ASC");
break;
case "programming":
this.listBooks = await this.$strapi.$books.find({ 'tags.name': ['برنامه نویسی'], _sort: 'updated_at:DESC' });
break;
case "new":
this.listBooks = await this.$strapi.$books.find("_sort=updated_at:DESC");
break;
default:
this.listBooks = this.$store.getters["books/randomBook"](this.$store.state.books.list2.length);
break;
}

}
}
</script>
<style scoped>
</style>

两个重要的变化是：

1-在我的Vue数据中使用名为list2的空数组，而不是Vue计算数据。

2-在我的infiniteScroll方法中使用一个名为emptyArr的变量，该方法仅包含原始数据(Vue-listBooks数据(的10项，并且每次从用户视图传递10个数据时都会滚动页面来显示它们。