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

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -183,7 +183,6 @@ header[role="banner"]{
 
   }
 
-
   // header bottom
   #block-pagetitle{
     float: left;

web/themes/custom/materiotheme/vuejs/components/Content/Article.vue

@@ -70,17 +70,22 @@ export default {
   methods: {
     getArticle(){
       console.log(this.$route);
+      // get the article uuid
       if(this.$route.query.uuid){
+        // we come from internal link with vuejs
         // directly record uuid
         this.uuid = this.$route.query.uuid
-        this.loadArticle()
       }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
-        // get the uuid from drupalDeclouped
+        // we landed in an internal page
-        // provided by materio_decoupled.module
+        // get the uuid from drupalDeclouped, provided by materio_decoupled.module
-        // console.log(drupalDecoupled);
         this.uuid = drupalDecoupled.entity_uuid
+      }
+
+      if(this.uuid){
         this.loadArticle()
       }else{
+        // if for any reason we dont have the uuid
+        // redirect to home
         this.$route.replace('home')
       }
     },

web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue

@@ -9,8 +9,8 @@
           <ArticleCard :item="item"/>
         </li>
       </ul>
-      <infinite-loading @infinite="getArticles">
+      <infinite-loading @infinite="nextPage">
-        <div slot="no-more">No more results</div>
+        <div slot="no-more">No more articles</div>
       </infinite-loading>
     </div>
   </div>
@@ -18,41 +18,31 @@
 
 <script>
 
-import { REST } from 'vuejs/api/rest-axios'
 import ArticleCard from 'vuejs/components/Content/ArticleCard'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Blabla",
-  data() {
+  // data() {
-    return {
+  //   return {
-      items:[],
+  //     items:[],
-      page:0
+  //     page:0
-    }
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      items: state => state.Blabla.items
+    })
   },
   created(){
-    this.getArticles()
+    if(!this.items.length)
+      this.getItems()
   },
   methods: {
-    getArticles($state){
+    ...mapActions({
-      REST.get(`/blabla_rest?_format=json&page=${this.page}`, {})
+      getItems: 'Blabla/getItems',
-        .then(({ data }) => {
+      nextPage: 'Blabla/nextPage'
-          console.log('blabla REST: data', data)
-          if(data.length){
-            this.items = this.items.concat(data)
-            // console.log('items.length', this.items.length);
-            this.page += 1;
-            if($state)
-              $state.loaded()
-          }else{
-            if($state)
-              $state.complete()
-          }
     })
-        .catch(( error ) => {
-            console.warn('Issue with blabla', error)
-            Promise.reject(error)
-        })
-    }
   },
   components: {
     ArticleCard

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')
+    }
+  }
+}