Vue3中如何向计算属性推送元素？无限滚动实现遇阻

核心问题分析 #

你当前的代码存在几个关键问题：

• 错误地将计算属性直接赋值给data属性，计算属性由响应式依赖驱动，不能直接调用赋值
• methods被嵌套在computed内部，属于语法错误
• 试图直接修改计算属性返回值，计算属性是只读的，无法直接执行push操作

正确实现思路 #

既然所有Profile数据已存入Vuex，我们只需要维护一个响应式的显示数量变量，结合计算属性截取Vuex数组的对应长度，滚动到底部时增加这个数量即可：

1. 用组件data定义displayCount，初始值设为Vuex中的初始加载数量
2. 计算属性根据displayCount截取Vuex中的currentProfileList，自动响应数据变化
3. 监听滚动事件触发加载更多逻辑，更新displayCount
4. 增加边界判断，避免超出总数据量

修正后的完整代码 #

<template>
  <div class="profile-list" @scroll="handleScroll">
    <div v-for="profile in displayedProfiles" :key="profile.id">
      {{ profile.name }}
    </div>
    <!-- 可选：加载状态提示 -->
    <div v-if="hasMore" class="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始显示数量取Vuex配置的初始值
      displayCount: this.$store.state.numberOfProfilesLoadedInitially
    }
  },
  computed: {
    displayedProfiles() {
      // 从Vuex数组中截取当前要显示的条目数
      return this.$store.state.currentProfileList.slice(0, this.displayCount)
    },
    totalProfiles() {
      return this.$store.state.currentProfileList.length
    },
    hasMore() {
      // 判断是否还有未显示的数据
      return this.displayCount < this.totalProfiles
    }
  },
  methods: {
    handleScroll(e) {
      const container = e.target
      // 判断是否滚动至底部（10px为容错阈值，可按需调整）
      const isBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 10
      if (isBottom && this.hasMore) {
        this.loadMoreProfiles()
      }
    },
    loadMoreProfiles() {
      // 每次加载的批次大小，复用初始配置值，也可自定义固定值
      const loadBatch = this.$store.state.numberOfProfilesLoadedInitially
      // 更新显示数量，确保不超过总数据量
      this.displayCount = Math.min(this.displayCount + loadBatch, this.totalProfiles)
    }
  }
}
</script>

<style scoped>
.profile-list {
  height: 80vh;
  overflow-y: auto;
}
.loading {
  text-align: center;
  padding: 10px;
}
</style>

关键改动说明 #

• 移除了data中对计算属性的错误赋值，改用displayCount控制显示长度
• 将methods移至与computed同级的位置，修正语法结构
• 计算属性displayedProfiles依赖displayCount和Vuex数组，数据变化时自动更新渲染
• 直接在滚动容器内监听滚动事件（若需全局滚动，可监听window的scroll事件），无需依赖Vuex的scrolledToBottom状态
• 增加hasMore判断，避免重复加载或超出数据范围

全局滚动场景适配 #

如果需要监听页面全局滚动而非容器内滚动，可在组件生命周期中添加监听：

mounted() {
  window.addEventListener('scroll', this.handleGlobalScroll)
},
beforeUnmount() {
  window.removeEventListener('scroll', this.handleGlobalScroll)
},
methods: {
  handleGlobalScroll() {
    const isBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 10
    if (isBottom && this.hasMore) {
      this.loadMoreProfiles()
    }
  }
  // ...其他方法
}

内容的提问来源于stack exchange，提问作者jeff3546