diff --git a/src/App.vue b/src/App.vue
index 0bb478c..37932c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,8 @@
     <div class="main">
         <div class="hello">
             <div class="header">
-                <button class="button">Load data</button>
-                <button class="button" @click="data = []">Clear</button>
+                <button class="button" @click="loadData">Load data</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,11 +37,15 @@
     };
 
     export default {
-        data() {
-            return {
-                data: []
-            };
-        }
+        methods: {
+            ...mapActions([
+                'loadData',
+                'clearData',
+            ]),
+        },
+        computed: mapState([
+            'data'
+        ]),
     };
 </script>