From 2f52f23e1ad1b428208004a7dde3b5649d2b18dd Mon Sep 17 00:00:00 2001
From: sw_pc <sw_pc@sw.com>
Date: Tue, 12 Sep 2023 19:24:03 +0800
Subject: [PATCH] =?UTF-8?q?Count=E7=BB=84=E4=BB=B6=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 course/vue2/vuex/heima/src/App.vue            | 11 ++++-
 .../vue2/vuex/heima/src/components/Count.vue  | 45 +++++++++++++++++++
 course/vue2/vuex/heima/src/store/index.js     | 25 +++++++++++
 3 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 course/vue2/vuex/heima/src/components/Count.vue

diff --git a/course/vue2/vuex/heima/src/App.vue b/course/vue2/vuex/heima/src/App.vue
index 55df315..53492b4 100644
--- a/course/vue2/vuex/heima/src/App.vue
+++ b/course/vue2/vuex/heima/src/App.vue
@@ -1,17 +1,20 @@
 <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>
diff --git a/course/vue2/vuex/heima/src/components/Count.vue b/course/vue2/vuex/heima/src/components/Count.vue
new file mode 100644
index 0000000..37cfbcb
--- /dev/null
+++ b/course/vue2/vuex/heima/src/components/Count.vue
@@ -0,0 +1,45 @@
+<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>
diff --git a/course/vue2/vuex/heima/src/store/index.js b/course/vue2/vuex/heima/src/store/index.js
index ceffa8e..0efce32 100644
--- a/course/vue2/vuex/heima/src/store/index.js
+++ b/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: {
   }
-- 
GitLab