lesson 210: add a vuex store

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>
+</style>

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>

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');

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;