lesson 213: store getters

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

@@ -7,7 +7,7 @@
 export default {
   computed: {
     counter() {
-      return this.$store.state.counter;
+      return this.$store.getters.normalizedCounter;
     }
   }
 };

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

@@ -6,7 +6,7 @@
 export default {
   computed: {
     counter() {
-      return this.$store.state.counter;
+      return this.$store.getters.finalCounter;
     }
   }
 };

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

@@ -13,6 +13,21 @@ const store = createStore({
     increase(state, payload) {
       state.counter = state.counter + payload.value;
     }
+  },
+  getters: {
+    finalCounter(state) {
+      return state.counter * 3;
+    },
+    normalizedCounter(_, getters) {
+      const finalCounter = getters.finalCounter;
+      if (finalCounter < 0) {
+        return 0;
+      }
+      if (finalCounter > 100) {
+        return 100;
+      }
+      return finalCounter;
+    }
   }
 });