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

Question

我想问如何使用Vue和vuex显示更多数据。已经存储在 vuex-store 管理中的所有数据。现在我想从状态管理中加载更多关于滚动的数据。 我找到了ajax的在线解决方案。但我需要加载表单状态管理（Vuex）。

这是我的 Vue 模板：

<template>
    <div>
        <div class="panel panel-default">
            <div class="panel-body">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <tr>
                                <th>Name - Number of Products: <span style="color: red"> {{products}} </span></th>
                                <th width="100">&nbsp;</th>
                            </tr>
                        </tr>
                    </thead>
                    <tbody v-if="isLoaded">
                        <tr v-for="company, index in companies">
                            <td>{{ company.name }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {  }
        },
        computed: {
          companies(){
           return this.$store.getters['exa1Company/getProducts'];
       },
       products(){
           return this.$store.getters['exa1Company/countProducts'];
       }
   },
   mounted() {
    this.$store.dispatch('exa1Company/indexResource');
}
}
</script>

为了简单起见，我的 vuex 存储文件是部分的

  export const getters = {
    countProducts(state) {
      return state.list.data.length;
    },
    getProducts(state) {
      return state.list.data;
    },
    getTodoById: (state) => (id) => {
      return state.list.data.find(tod => tod.id === id)
    }
  };

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

Answer 1

这样的事情应该可以工作。在模板中使用companiesLoaded，滚动到底部时增加page。我希望这会有所帮助。

        data: function () {
            return { 
                page: 1,
                perPage: 20
            }
        },
        computed: {
          companies(){
           return this.$store.getters['exa1Company/getProducts'];
          },
          companiesLoaded(){
           return this.companies.slice(0, this.page * this.perPage)
          },
       ...