lesson 211: store mutations

2021-05-04_vuex-01-starting-setup/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <base-container title="Vuex">
     <the-counter></the-counter>
+    <change-counter></change-counter>
     <button @click="increaseCounter">Add 1</button>
   </base-container>
 </template>
@@ -8,16 +9,18 @@
 <script>
 import BaseContainer from './components/BaseContainer.vue';
 import TheCounter from './components/TheCounter.vue';
+import ChangeCounter from './components/Changecounter';
 
 export default {
   components: {
     BaseContainer,
-    TheCounter
+    TheCounter,
+    ChangeCounter
   },
 
   methods: {
     increaseCounter() {
-      this.$store.state.counter++;
+      this.$store.commit('increment');
     }
   }
 };

2021-05-04_vuex-01-starting-setup/src/components/Changecounter.vue

@@ -0,0 +1,13 @@
+<template>
+  <button @click="addOne">Add 1</button>
+</template>
+
+<script>
+export default {
+  methods: {
+    addOne() {
+      this.$store.commit('increment');
+    }
+  }
+};
+</script>

2021-05-04_vuex-01-starting-setup/src/store.js

@@ -5,6 +5,11 @@ const store = createStore({
     return {
       counter: 0
     };
+  },
+  mutations: {
+    increment(state) {
+      state.counter = state.counter + 1;
+    }
   }
 });