lesson 212: mutations with payload

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

@@ -1,8 +1,9 @@
 <template>
   <base-container title="Vuex">
     <the-counter></the-counter>
+    <favorite-value></favorite-value>
     <change-counter></change-counter>
-    <button @click="increaseCounter">Add 1</button>
+    <button @click="increaseCounter">Add 10</button>
   </base-container>
 </template>
 
@@ -10,17 +11,19 @@
 import BaseContainer from './components/BaseContainer.vue';
 import TheCounter from './components/TheCounter.vue';
 import ChangeCounter from './components/Changecounter';
+import FavoriteValue from './components/FavoriteValue';
 
 export default {
   components: {
     BaseContainer,
     TheCounter,
-    ChangeCounter
+    ChangeCounter,
+    FavoriteValue
   },
 
   methods: {
     increaseCounter() {
-      this.$store.commit('increment');
+      this.$store.commit('increase', { value: 10 });
     }
   }
 };

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

@@ -0,0 +1,14 @@
+<template>
+  <h3>{{ counter }}</h3>
+  <p>More...</p>
+</template>
+
+<script>
+export default {
+  computed: {
+    counter() {
+      return this.$store.state.counter;
+    }
+  }
+};
+</script>

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

@@ -9,6 +9,9 @@ const store = createStore({
   mutations: {
     increment(state) {
       state.counter = state.counter + 1;
+    },
+    increase(state, payload) {
+      state.counter = state.counter + payload.value;
     }
   }
 });