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

How to use "Vue-infinite-loading" in nuxt without loading data by axios?

我正在开发 Nuxt 应用程序。对于我的一个动态页面,我想显示 无限滚动 的数据。为此,我决定使用 Vue-infinite-loading. I read this article and also skimmed the documentation of Vue-infinite-loading. In both of them they were using axios module to load data step by step to show in the page when the scroll reaches to specific point in that page. But in my page the data is already present in the page according to page-id with the help of $strapi module 和 Nuxt fetch 钩子。我页面的全部代码如下:

<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中的数据(根据page id是不同的)然后把它放到listBooksVue数据中。我想要做的是首先显示 2 数据 listBooks 并且当滚动到达第二个数据的末尾时(第二张卡片在这里),我用无限滚动的方法逐步显示其余数据。所以我使用了一个名为 listShowComputed data 并在 v-for 中使用它。然后我把我认为可能会起作用的代码放在 infiniteScroll 方法中。但显然那是行不通的,因为我只是猜测。如果有人知道如何更改该代码以在无限滚动中工作并显示数据,请帮助我解决这个问题。

通常,无限加载器用于拥有一小部分数据,然后出于性能原因扩展这些数据:不必一次加载 100 个元素,而是加载 10 个,然后再加载 10 个等等...

如果您已经在本地立即拥有数据并且喜欢它的行为,而无需从 Strapi 后端进行任何“分页”,您可以随时观察 @infinite event 并增加初始数据的大小具有下一个元素的数组。

说如果你显示其中的 10 个,想要向下滚动并再显示 10 个:显示前 10 个,然后当 infinite 事件被触发时,再向你的初始数组追加 10 个项目等等上。

我的 可能有助于更深入地理解它。

PS: 小心一些 reactivity issues 有一天你在处理数组时可能会遇到的问题。

我终于在 kissu 的帮助下回答并在 the article mentioned in my question 的代码的启发下找到了解决方案。在这里我将 post 我整个 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>

the two important changes were:

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

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