使用Vue和Vuex在Scroll上加载更多数据

npm install vue
npm install vuex

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters('scroll', ['items', 'loading']),
  },
  methods: {
    ...mapActions('scroll', ['fetchMore']),
    handleScroll(event) {
      const element = event.target;
      if (element.scrollHeight - element.scrollTop === element.clientHeight) {
        this.fetchMore();
      }
    },
  },
};
</script>

// store/modules/scroll.js
const state = {
  items: [],
  loading: false,
};

const mutations = {
  SET_ITEMS(state, items) {
    state.items = items;
  },
  SET_LOADING(state, loading) {
    state.loading = loading;
  },
};

const actions = {
  fetchMore({ commit }) {
    commit('SET_LOADING', true);
    // 使用异步请求获取更多数据，并在请求成功后将数据存储到state中
    // 示例：调用API获取更多数据，并使用commit方法将数据存储到state中
    api.fetchMoreData()
      .then((response) => {
        commit('SET_ITEMS', response.data);
        commit('SET_LOADING', false);
      })
      .catch((error) => {
        console.error(error);
        commit('SET_LOADING', false);
      });
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import scroll from './modules/scroll';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    scroll,
  },
});

<template>
  <div>
    <ScrollComponent />
    <button @click="fetchMore">Load More</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import ScrollComponent from './ScrollComponent.vue';

export default {
  components: {
    ScrollComponent,
  },
  methods: {
    ...mapActions('scroll', ['fetchMore']),
  },
};
</script>