Count组件测试

course/vue2/vuex/heima/src/App.vue

 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Count msg="Welcome to Your Vue.js App"/>
+    <HelloWorld id="hello" msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+import Count from './components/Count.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    HelloWorld,
+    Count
   }
 }
 </script>
@@ -25,4 +28,8 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+#hello {
+  display: none;
+}
 </style>

course/vue2/vuex/heima/src/components/Count.vue

+<template>
+  <div>
+    <h1>当前求和为：{{ $store.getters.bigSum }}</h1>
+    <select v-model.number="n">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+    </select>
+    <button @click="increment">+</button>
+    <button @click="decrement">-</button>
+    <button @click="incrementOdd">当前求和为奇数再加</button>
+    <button @click="incrementWait">等一等再加</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CountA",
+  data() {
+    return {
+      n: 1, //用户选择的数字
+    };
+  },
+  methods: {
+    increment() {
+      this.$store.commit("ADD", this.n);
+    },
+    decrement() {
+      this.$store.commit("SUBTRACT", this.n);
+    },
+    incrementOdd() {
+      this.$store.dispatch("addOdd", this.n);
+    },
+    incrementWait() {
+      this.$store.dispatch("addWait", this.n);
+    },
+  },
+};
+</script>
+
+<style>
+button {
+  margin-left: 5px;
+}
+</style>

course/vue2/vuex/heima/src/store/index.js

@@ -5,12 +5,37 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    sum:0 //当前的和
   },
   getters: {
+    bigSum(state) {
+      console.log(state)
+      return state.sum * 10
+    }
   },
   mutations: {
+    ADD(state,value){
+      console.log("mutations ADD")
+      state.sum += value
+    },
+    SUBTRACT(state,value){
+      console.log("mutations SUBTRACT")
+      state.sum -= value
+    }
   },
   actions: {
+    addOdd(context,value){
+        console.log("actions中的addOdd被调用了")
+        if(context.state.sum % 2){
+            context.commit('ADD',value)
+        }
+    },
+    addWait(context,value){
+        console.log("actions中的addWait被调用了")
+        setTimeout(()=>{
+			context.commit('ADD',value)
+		},500)
+    },
   },
   modules: {
   }