From 88a4a2e920703cdc8cd9585ba5e0e04e25ebe7cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Bataille?= <clement.bataille@360learning.com>
Date: Tue, 15 Dec 2020 11:13:16 +0100
Subject: [PATCH 1/2] feat: add loading data without the store

---
 src/App.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0bb478c..82e151e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
     <div class="main">
         <div class="hello">
             <div class="header">
-                <button class="button">Load data</button>
+                <button class="button" @click="loadData">Load data</button>
                 <button class="button" @click="data = []">Clear</button>
             </div>
             <div class="data-list">
@@ -39,7 +39,17 @@
             return {
                 data: []
             };
-        }
+        },
+        methods: {
+            async loadData() {
+                try {
+                    const { records } = await loadJSon(URL)
+                    this.data = records
+                } catch (error) {
+                    console.error('Error while loading the data:', error)
+                }
+            },
+        },
     };
 </script>
 

From 1e5c4f341447fad1d3596516981ef1b7b5365cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Bataille?= <clement.bataille@360learning.com>
Date: Tue, 15 Dec 2020 11:27:10 +0100
Subject: [PATCH 2/2] refactor: use vuex to manage data

---
 src/App.vue | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 82e151e..37932c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
         <div class="hello">
             <div class="header">
                 <button class="button" @click="loadData">Load data</button>
-                <button class="button" @click="data = []">Clear</button>
+                <button class="button" @click="clearData">Clear</button>
             </div>
             <div class="data-list">
 
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+    import { mapActions, mapState } from 'vuex'
+
     const URL = "https://opendata.paris.fr/api/records/1.0/search//?dataset=zones-touristiques-internationales&rows=5";
 
     const loadJSon = async (url) => {
@@ -35,21 +37,15 @@
     };
 
     export default {
-        data() {
-            return {
-                data: []
-            };
-        },
         methods: {
-            async loadData() {
-                try {
-                    const { records } = await loadJSon(URL)
-                    this.data = records
-                } catch (error) {
-                    console.error('Error while loading the data:', error)
-                }
-            },
+            ...mapActions([
+                'loadData',
+                'clearData',
+            ]),
         },
+        computed: mapState([
+            'data'
+        ]),
     };
 </script>