From 0a1432c828c72854507b4ebc277978649c8a4080 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Tue, 4 May 2021 18:05:03 +0200
Subject: [PATCH] lesson 210: add a vuex store

---
 2021-05-04_vuex-01-starting-setup/src/App.vue     | 15 +++++++++++++--
 .../src/components/TheCounter.vue                 | 13 +++++++++++++
 2021-05-04_vuex-01-starting-setup/src/main.js     |  2 ++
 2021-05-04_vuex-01-starting-setup/src/store.js    | 11 +++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue
 create mode 100644 2021-05-04_vuex-01-starting-setup/src/store.js

diff --git a/2021-05-04_vuex-01-starting-setup/src/App.vue b/2021-05-04_vuex-01-starting-setup/src/App.vue
index 2e4c462..c56f5c1 100644
--- a/2021-05-04_vuex-01-starting-setup/src/App.vue
+++ b/2021-05-04_vuex-01-starting-setup/src/App.vue
@@ -1,14 +1,25 @@
 <template>
-  <base-container title="Vuex"></base-container>
+  <base-container title="Vuex">
+    <the-counter></the-counter>
+    <button @click="increaseCounter">Add 1</button>
+  </base-container>
 </template>
 
 <script>
 import BaseContainer from './components/BaseContainer.vue';
+import TheCounter from './components/TheCounter.vue';
 
 export default {
   components: {
     BaseContainer,
+    TheCounter
   },
+
+  methods: {
+    increaseCounter() {
+      this.$store.state.counter++;
+    }
+  }
 };
 </script>
 
@@ -24,4 +35,4 @@ html {
 body {
   margin: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue b/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue
new file mode 100644
index 0000000..c7a3f35
--- /dev/null
+++ b/2021-05-04_vuex-01-starting-setup/src/components/TheCounter.vue
@@ -0,0 +1,13 @@
+<template>
+  <h3>{{ counter }}</h3>
+</template>
+
+<script>
+export default {
+  computed: {
+    counter() {
+      return this.$store.state.counter;
+    }
+  }
+};
+</script>
diff --git a/2021-05-04_vuex-01-starting-setup/src/main.js b/2021-05-04_vuex-01-starting-setup/src/main.js
index c41c25c..7c2ac18 100644
--- a/2021-05-04_vuex-01-starting-setup/src/main.js
+++ b/2021-05-04_vuex-01-starting-setup/src/main.js
@@ -1,7 +1,9 @@
 import { createApp } from 'vue';
 
 import App from './App.vue';
+import store from './store.js';
 
 const app = createApp(App);
 
+app.use(store);
 app.mount('#app');
diff --git a/2021-05-04_vuex-01-starting-setup/src/store.js b/2021-05-04_vuex-01-starting-setup/src/store.js
new file mode 100644
index 0000000..9fe1558
--- /dev/null
+++ b/2021-05-04_vuex-01-starting-setup/src/store.js
@@ -0,0 +1,11 @@
+import { createStore } from 'vuex';
+
+const store = createStore({
+  state() {
+    return {
+      counter: 0
+    };
+  }
+});
+
+export default store;