我正在Vue 3应用程序中构建一个无限滚动功能。一切都很好，除了我找不到一种方法来推送更多的数据时，用户已经滚动到页面的结尾。
所有配置文件最初都被加载到Vuex中，但随着用户不断向下滚动，只能逐批渲染。
我希望首先呈现初始数量的概要文件，然后在用户到达页面底部后，将大量新的概要文件推送到保存数组的数据中。
我需要使用一个计算属性，因为这将等待，直到Vuex数组的配置文件已经从数据库加载。如果我使用一个挂钩，风险是，数据还没有加载。而且，计算属性将重新计算，每次新的数据被添加。
因此，v-for指令被绑定到此计算属性。
但是我如何将新的配置文件推送到这个计算属性呢？我尝试将这个计算属性分配给一个组件数据属性，但是这显然不是它的工作方式。
任何帮助都不胜感激。
<template>
<div v-for="profile in loadedProfiles" :key="profile.id">
{{ profile.name }}
</div>
</template>
<script>
export default {
data: () => ({
loadedProfiles: this.computedLoadedProfiles()
}),
computed: {
computedLoadedProfiles() {
if (this.$store.state.numberOfProfilesLoaded == this.$store.state.numberOfProfilesLoadedInitially) {
return this.$store.state.currentProfileList.slice(0, this.$store.state.numberOfProfilesLoadedInitially);
}
},
methods: {
loadMoreProfiles() {
if($store.state.scrolledToBottom) {
loadedProfiles.push(...) //push more profiles to loadedProfiles
}
}
}
},
}
</script>
<style>
</style>
1条答案
按热度按时间dxxyhpgq1#
以下是商店的运作机制：
第一个
剩下的就是将
showMore链接到滚动操作，而不是按钮，并用对服务器的实际调用替换loadMoreProfiles操作，以获取更多的配置文件并将它们添加到状态中。显然，您不必将
visibleProfilesCount和visibleProfiles保存在存储区中，可以在组件中声明它们，沿着所示：它的要旨是：
visibleProfiles是computed，或存储上的getter，（这意味着导出状态），由两个其它状态属性产生：profiles和visibleProfilesCount。每当状态属性之一改变时，computed改变。