lesson 216: mapGetters

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

@@ -1,14 +1,14 @@
 <template>
-  <h3>{{ counter }}</h3>
+  <h3>{{ finalCounter }}</h3>
   <p>More...</p>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   computed: {
-    counter() {
-      return this.$store.getters.normalizedCounter;
-    }
+    ...mapGetters(['finalCounter'])
   }
 };
 </script>

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

@@ -1,13 +1,13 @@
 <template>
-  <h3>{{ counter }}</h3>
+  <h3>{{ finalCounter }}</h3>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   computed: {
-    counter() {
-      return this.$store.getters.finalCounter;
-    }
+    ...mapGetters(['finalCounter'])
   }
 };
 </script>

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

@@ -36,9 +36,7 @@ const store = createStore({
       }, 2000);
     },
     increase(context, payload) {
-      setTimeout(function() {
-        context.commit('increase', payload);
-      }, 2000);
+      context.commit('increase', payload);
     }
   }
 });