lesson 214: vuex actions

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

@@ -23,7 +23,7 @@ export default {
 
   methods: {
     increaseCounter() {
-      this.$store.commit('increase', { value: 10 });
+      this.$store.dispatch('increase', { value: 10 });
     }
   }
 };

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

@@ -6,7 +6,7 @@
 export default {
   methods: {
     addOne() {
-      this.$store.commit('increment');
+      this.$store.dispatch('increment');
     }
   }
 };

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

@@ -28,6 +28,18 @@ const store = createStore({
       }
       return finalCounter;
     }
+  },
+  actions: {
+    increment(context) {
+      setTimeout(function() {
+        context.commit('increment');
+      }, 2000);
+    },
+    increase(context, payload) {
+      setTimeout(function() {
+        context.commit('increase', payload);
+      }, 2000);
+    }
   }
 });