converted blabla listing into vuex store to avoid reloading the whole list

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
+import Blabla from './modules/blabla'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
@@ -11,6 +12,7 @@ export default new Vuex.Store({
   modules: {
     Common,
     User,
-    Search
+    Search,
+    Blabla
   }
 })

web/themes/custom/materiotheme/vuejs/store/modules/blabla.js

@@ -0,0 +1,62 @@
+import { JSONAPI } from 'vuejs/api/json-axios'
+import { REST } from 'vuejs/api/rest-axios'
+import { MA } from 'vuejs/api/ma-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    items: [],
+    page: 0,
+    // infinteState will come from vue-infinite-loading plugin
+    // implemented in vuejs/components/Content/Base.vue
+    infiniteLoadingState: null
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setItems (state, items) {
+      state.items = state.items.concat(items)
+    },
+    incrementPage(state){
+      state.page += 1;
+    },
+    setInfiniteState(state, infiniteLoadingstate){
+      state.infiniteLoadingState = infiniteLoadingstate
+    }
+  },
+
+  // actions
+  actions : {
+    getItems({ dispatch, commit, state }){
+      REST.get(`/blabla_rest?_format=json&page=${state.page}`, {})
+        .then(({ data }) => {
+          console.log('blabla REST: data', data)
+          if(data.length){
+            commit('setItems',data)
+            // console.log('items.length', this.items.length);
+            if(state.infiniteLoadingState)
+              state.infiniteLoadingState.loaded()
+          }else{
+            if(state.infiniteLoadingState)
+              state.infiniteLoadingState.complete()
+          }
+        })
+        .catch(( error ) => {
+            console.warn('Issue with blabla', error)
+            Promise.reject(error)
+        })
+    },
+    nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
+      console.log("Search nextPage", $infiniteLoadingstate);
+      commit('incrementPage')
+      commit('setInfiniteState', $infiniteLoadingstate)
+      dispatch('getItems')
+    }
+  }
+}