vue-infinite-loading with vuex

[ghost]

Is there an example of implementation with vuex?

[qlereboursBS]

I would need it too because I have troubles implementing the infinite loader, loading data coming from the store.

[ghost]

I found a way to implement it. You need to pass the vue infinite $state context in the store

Le lun. 20 avr. 2020 à 12:07, qlereboursBS [email protected] a écrit :

I would need it too because I have troubles implementing the infinite loader, loading data coming from the store.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/PeachScript/vue-infinite-loading/issues/276#issuecomment-616447137, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABCUIVG74I43KLUZDG6YYPDRNQNGLANCNFSM4MIJHH2Q .

[gsern1]

@tchret would you mind sharing your implementation? I'm having a hard time making vue-infinite-loading work with vuex

[nahuelDev23]

@tchret would you mind sharing your implementation?

[ghost]

@nahuelDev23 @gsern1 Just pass the $state in the store

[ghost]

[timmaier]

another way is to return a promise in your store method with a loaded value:

Vuex Store Promise

return new Promise( (resolve, reject) => {
                let loaded = undefined; //set to undefined too start
                axios.get( 'search',{
                    params: {
                        q: state.searchKeyword,
                        l: state.limit,
                        sort: state.sort,
                        page: state.page,
                    }
                })
                    .then(response => {
                        if (response.data.listings.length) {
                            commit('addListings', response.data.listings);
                            commit('totalPages', response.data.pagination.last);
                            commit('totalCount', response.data.pagination.count);

                            loaded = true
                        }
                        else {
                            loaded = false
                        }

                        resolve(loaded);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });

Vue Component searchMore method

searchMore($state) {
                this.$store.dispatch('Listings/searchListing')
                    .then(loadState => {
                        if(loadState) {
                            $state.loaded()
                        } else {
                            $state.complete()
                        }
                    })
                    .catch(error => {
                        if (error) {
                            //todo handling of error
                            $state.error()
                        }
                        else {
                            //todo handling of error
                            $state.error()
                        }
                    });
            }

[bananabreadpr]

Another trick is to store your current loadMore $state in a variable like so this.infiniteState = $state And in your vue watch function trigger the this.infiniteState.loaded() / this.infiniteState.complete()

watch: {
someVal(newVal, oldVal) {
this.infiniteState.loaded()
}
....
},
methods: {
  loadMore($state) {
     this.infiniteState = $state
      ....
     }
 }