如何在vuex中使用InfiniteLoading (错误)

Question

我是vuex和vue的初学者，我需要在vuex项目中使用无限加载，但它不工作，我需要一些专家的帮助。我将提供以下详细信息：

我用index.js编写的vuex代码

import axios from 'axios';
const state = {
    productItems_bottom: []
}
const mutations = {
    UPDATE_PRODUCT_ITEMS_bottom (state, payload) {
        state.productItems_bottom = payload;
    }
}
const actions = {
    getProductItems_bottom ({ commit },lastpage) {
        axios.get('http://127.0.0.1:8000/api/standstop?page='+lastpage).then((response) => {
            commit('UPDATE_PRODUCT_ITEMS_bottom', response.data)
        });
    }
}
const getters = {
    productItems_bottom: state => state.productItems_bottom,
    last_page: state=> state.productItems_bottom.last_page

}
const index_page_Bottom_Module = {
    state,
    mutations,
    actions,
    getters
}
export default index_page_Bottom_Module;

我的vue代码显示在这里，但有些地方不对劲。

<template>
    <section id="product-item_bottom"  v-if="productItems_bottom">
        <div class="columns is-multiline is-mobile">
        <div v-for="productItem_bottom in productItems_bottom" :key="productItem_bottom.id" class="column is-one-third">
                <figure class="image"><img  v-bind:src="'http://localhost/plategea%20laravel%20and%20vue/plategea/plategea/public/storage/'+productItem_bottom.src">
                    <span class="tag is-primary">{{ productItem_bottom.title }}</span>
                </figure>
            </div> 
        </div>
        <infinite-loading @distance="1" @infinite="infiniteHandler"/>
    </section>
</template>
<script>
 import InfiniteLoading from 'vue-infinite-loading';
    import {mapGetters  } from 'vuex';
let lastpage=1;
    export default {
        name:'ProductItem_bottom',
        computed: {
            ...mapGetters(['productItems_bottom','last_page'])
       
        },

        created(){
            
        },
        methods:{
            infiniteHandler($state) {
this.$store.dispatch('getProductItems_bottom',lastpage);
             this.$store.commit({ type:'UPDATE_PRODUCT_ITEMS_bottom' });
                console.log(this.last_page);
                    if (lastpage<=this.last_page) {
                        $state.loaded();
                          lastpage +=1;
                       }
                        if(lastpage > this.last_page){
                            $state.complete();
                    } 
                }
                },
        components: {
            InfiniteLoading,
        }
    }
</script>

和我的api

public function showStandstop()
    {

        $stands=Stands::where('state',1)->orderBy('trend', 'desc')->paginate(3);
        return response()->json($stands, 200);
    }

但是InfiniteLoading不工作了！提前谢谢你，我期待着看到你的回复。

Answer 1

我认为您没有将有效负载分配给productItems_bottom.last_page anywhere。

UPDATE_PRODUCT_ITEMS_bottom (state, payload) {
  state.productItems_bottom = payload;
}

last_page: state=> state.productItems_bottom.last_page

你能检查一下吗，如果工作正常，请告诉我。