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

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
-        // provided by materio_decoupled.module
-        // console.log(drupalDecoupled);
+        // we landed in an internal page
+        // get the uuid from drupalDeclouped, provided by materio_decoupled.module
         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">
-        <div slot="no-more">No more results</div>
+      <infinite-loading @infinite="nextPage">
+        <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() {
-    return {
-      items:[],
-      page:0
-    }
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      items: state => state.Blabla.items
+    })
   },
   created(){
-    this.getArticles()
+    if(!this.items.length)
+      this.getItems()
   },
   methods: {
-    getArticles($state){
-      REST.get(`/blabla_rest?_format=json&page=${this.page}`, {})
-        .then(({ data }) => {
-          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)
-        })
-    }
+    ...mapActions({
+      getItems: 'Blabla/getItems',
+      nextPage: 'Blabla/nextPage'
+    })
   },
   components: {
     ArticleCard