How to use InfiniteLoading in vuex (error) - vue.js

Question

I'm a beginner to vuex and vue, I need to use a infinite-loading in vuex project, but it is not working, I need some experts' help. I will provide details as below:
my vuex code in index.js
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;
And my vue code display here, but something's wrong.
<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>
And my api
public function showStandstop()
{
$stands=Stands::where('state',1)->orderBy('trend', 'desc')->paginate(3);
return response()->json($stands, 200);
}
but InfiniteLoading not working! I don't know what is the problem & where should I look for, do you have any idea what shall I change & work on?
thank you in advance I'm looking forward to seeing your responds.

Answer 1

I think your not assigning the payload to the productItems_bottom.last_page anywhere.
UPDATE_PRODUCT_ITEMS_bottom (state, payload) {
state.productItems_bottom = payload;
}
last_page: state=> state.productItems_bottom.last_page
can you check that and let me know if is working...