How to use InfiniteLoading in vuex (error)

[behzadnet91]

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 }) { axios.get('http://127.0.0.1:8000/api/standstop').then((response) => { commit('UPDATE_PRODUCT_ITEMS_bottom', response.data) }); } }

const getters = { productItems_bottom: state => state.productItems_bottom,

}

const index_page_Bottom_Module = { state, mutations, actions, getters }

export default index_page_Bottom_Module;

And

my vue code

but InfiniteLoading not working! Help me. and script code in vue

import InfiniteLoading from 'vue-infinite-loading';
import {mapGetters  } from 'vuex';
export default {
    name:'ProductItem_bottom',
    computed: {
        ...mapGetters(['productItems_bottom'])

    },

    created(){
        this.$store.dispatch('getProductItems_bottom');
    },
    methods:{
        ...mapGetters('list', [
            'getProductItems_bottom'
        ]),
        infiniteHandler($state) {
            setTimeout(() => {
                console.log(this.productItems_bottom.length);
                //returns 0 but vue debugger says products state got datas
                this.$store.commit({ type:'UPDATE_PRODUCT_ITEMS_bottom' });
                if (this.productItems_bottom.length) {
                    $state.loaded();
                    if(this.productItems_bottom.length < 5){
                        $state.complete();
                    }
                } else {
                    $state.complete();
                }
            }, 1000);
            }
            },
    components: {
        InfiniteLoading,
    }
}