vue

vue2.0/vue高阶/project1.0/src/App.vue

@@ -21,6 +21,29 @@
     <p>2.数值：{{$store.getters.newCount}}</p>
     <p>2.数值：{{newCount}}</p>
     <hr />
+    <!-- 
+      Mutations 同步
+        1.this.$store.commit("对应的方法",传参)
+        2.
+          引入mapMutations 
+          解构 ...mapMutations(['xxx'],['xxx']....)
+          使用：this.xxx()
+     -->
+    <!-- 
+      Actions 异步
+        定义：
+          方法名(context) {
+            context.commit("调用的同步方法")
+          }
+        1.this.$store.commit("对应的方法")
+        2.
+          引入mapActions
+          解构 ...mapActions(['xxx'],['xxx']....)
+          使用：this.xxx()
+     -->
+    <button @click="add">添加</button>
+    <br><br>
+    <button @click="reduce">递减</button>
     <h2>组件库</h2>
     <el-button type="primary">主要按钮</el-button>
     <el-carousel indicator-position="outside" :autoplay="false">
@@ -40,7 +63,8 @@
 </template>
 <script>
 import axios from "axios";
-import { mapState, mapGetters } from "vuex";
+// import {mapMutations} from 'vuex';
+import { mapState, mapGetters, mapActions } from "vuex";
 export default {
   data() {
     return {
@@ -84,6 +108,21 @@ export default {
           console.log(err, "失败");
         });
     },
+    add() {
+      this.$store.commit("addCount",10);
+    },
+    // 同步
+    // ...mapMutations(['reduceCount']),
+    // 异步
+    ...mapActions(['asyncReduce']),
+    reduce() {
+      // 同步
+      // this.reduceCount();
+      // this.$store.commit("reduceCount");
+      // 异步
+      this.$store.dispatch("asyncReduce")
+      // this.asyncReduce()
+    }
   },
 };
 </script>

vue2.0/vue高阶/project1.0/src/store/index.js

@@ -16,12 +16,25 @@ export default new Vuex.Store({
   getters: {
     // 类似于computed
     newCount(state) {
-      return state.count * 2;
+      return state.count;
     }
   },
   mutations: {
+    // 同步事件
+    addCount(state,num) {
+      state.count = state.count + num;
+    },
+    reduceCount(state) {
+      state.count--;
+    }
   },
   actions: {
+    //异步事件
+    asyncReduce(context) {
+      setTimeout(()=>{
+        context.commit("reduceCount")
+      },1000)
+    }
   },
   modules: {
   }