From 2f937141f887e09b58aaabb3c9d97aef96b2b6b9 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Wed, 20 Sep 2023 21:58:25 +0800
Subject: [PATCH] =?UTF-8?q?vuex=E4=B8=B4=E6=97=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/index.js               |  6 ++++++
 src/views/CompositionAPIView.vue | 21 ++++++++++++++++++++-
 src/views/OptionsAPIView.vue     | 23 +++++++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index 4f8f73b..1b46523 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,5 +12,11 @@ export default createStore({
         moreCount: (state) => (n) => {
             return state.count * n
         }
+    },
+    mutations: {
+        // payload用于携带参数
+        increment(state, payload) {
+            state.count += payload.num
+        }
     }
 })
diff --git a/src/views/CompositionAPIView.vue b/src/views/CompositionAPIView.vue
index 81eca08..2993e76 100644
--- a/src/views/CompositionAPIView.vue
+++ b/src/views/CompositionAPIView.vue
@@ -1,17 +1,36 @@
 <template>
+  <!-- 对state的操作 -->
   <p><span><b>store.state.count: </b></span>{{ store.state.count }}</p>
   <p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p>
+  <!-- 对getters的操作，分为无参和传参 -->
   <p><span><b>store.getters.doubleCount: </b></span>{{ store.getters.doubleCount }}</p>
   <p><span><b>store.getters.moreCount(10): </b></span>{{ store.getters.moreCount(10) }}</p>
+  <!-- 对mutations的操作 -->
+  <p><span><b>store.commit('increment', {num: 7}): </b></span>
+    <button @click="inc">点一下count+7</button>
+  </p>
+  <p><span><b>store.commit({type: "increment", num: 5}): </b></span>
+    <button @click="inc2">点一下count+5</button>
+  </p>
 </template>
 
 <script setup>
 import {computed} from "vue";
 import {useStore} from "vuex";
 
+// 实例化useStore对象
 const store = useStore()
-
+// 本地方法中调用vuex
 const halfCount = computed(() => store.state.count * 0.5);
+// 属性方式映射vuex中的mutations，必须使用commit方法订阅mutations
+// 属性形式订阅mutations
+const inc = () => {
+  store.commit('increment', {num: 7})
+}
+// 对象形式订阅mutations， type是mutations的名称
+const inc2 = () => {
+  store.commit({type: "increment", num: 5})
+}
 
 </script>
 
diff --git a/src/views/OptionsAPIView.vue b/src/views/OptionsAPIView.vue
index 9dcdb48..9773e44 100644
--- a/src/views/OptionsAPIView.vue
+++ b/src/views/OptionsAPIView.vue
@@ -1,17 +1,40 @@
 <template>
+  <!-- 对state的操作 -->
   <p><span><b>this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
   <p><span><b>调用computed(halfCount): </b></span>{{ halfCount }}</p>
+  <!-- 对getters的操作，分为无参和传参 -->
   <p><span><b>this.$store.getters.doubleCount: </b></span>{{ this.$store.getters.doubleCount }}</p>
   <p><span><b>this.$store.getters.moreCount(10): </b></span>{{ this.$store.getters.moreCount(10) }}</p>
+  <!-- 对mutations的操作 -->
+  <p><span><b>this.$store.commit('increment', {num: 7})}: </b></span>
+    <button @click="inc">点一下count+7</button>
+  </p>
+  <p><span><b>this.$store.commit({type: "increment", num: 5})}: </b></span>
+    <button @click="inc2">点一下count+5</button>
+  </p>
 </template>
 
 <script>
 export default {
   name: "OptionsAPIView",
+  // 通过computed来映射state数据
   computed: {
     halfCount: function () {
       return this.$store.state.count * 0.5
     }
+  },
+  methods: {
+    // 属性形式订阅mutations
+    inc: function () {
+      this.$store.commit('increment', {num: 7})
+    },
+    // 对象形式订阅mutations， type是mutations的名称
+    inc2: function () {
+      this.$store.commit({
+        type: "increment",
+        num: 5
+      })
+    }
   }
 }
 </script>