From e465b660f245f7307263d88b14d1d3463eab667f Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Fri, 22 Sep 2023 13:21:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90modules=E7=9A=84=E5=AD=A6?=
 =?UTF-8?q?=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/ModuleA.js     |   8 ++-
 src/store/modules/ModuleB.js     |   6 +-
 src/views/CompositionAPIView.vue |  84 +++++++++++++++---------
 src/views/OptionsAPIView.vue     | 108 +++++++++++++++++--------------
 4 files changed, 125 insertions(+), 81 deletions(-)

diff --git a/src/store/modules/ModuleA.js b/src/store/modules/ModuleA.js
index 69c9967..00d45c5 100644
--- a/src/store/modules/ModuleA.js
+++ b/src/store/modules/ModuleA.js
@@ -9,12 +9,14 @@ export const moduleA = {
     },
     mutations: {
         mutation_a(state, payload) {
-            state.state_a + payload.num;
+            state.state_a += payload.num;
         }
     },
     actions: {
-        action_a(content, payload){
-            content.commit('mutation_a', {num: payload.num})
+        action_a(content, payload) {
+            if (content.state.state_a > 50) {
+                content.commit('mutation_a', {num: payload.num})
+            }
         }
     }
 }
diff --git a/src/store/modules/ModuleB.js b/src/store/modules/ModuleB.js
index bbd8b38..0f1683a 100644
--- a/src/store/modules/ModuleB.js
+++ b/src/store/modules/ModuleB.js
@@ -10,12 +10,14 @@ export const moduleB = {
     },
     mutations: {
         mutation_b: (state, payload) => {
-            state.state_b + payload.num;
+            state.state_b += payload.num;
         }
     },
     actions: {
         action_b: (content, payload) => {
-            content.commit('mutation_b', {num: payload.num})
+            if (content.state.state_b > 50) {
+                content.commit('mutation_b', {num: payload.num})
+            }
         }
     }
 }
diff --git a/src/views/CompositionAPIView.vue b/src/views/CompositionAPIView.vue
index 05f9b53..093c864 100644
--- a/src/views/CompositionAPIView.vue
+++ b/src/views/CompositionAPIView.vue
@@ -1,49 +1,75 @@
 <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>
+  <h3>对state的操作</h3>
+  <p><span><b>根-store.state.count: </b></span>{{ store.state.count }}</p>
+  <p><span><b>A-store.state.state_a: </b></span>{{ store.state.module_a.state_a }}</p>
+  <p><span><b>B-store.state.module_b.state_b: </b></span>{{ store.state.module_b.state_b }}</p>
+
+  <!-- 对getters的操作 -->
+  <h3>对getters的操作</h3>
+  <p><span><b>根-store.getters.getter(3): </b></span>{{ store.getters.getter(3) }}</p>
+  <p><span><b>A-store.getters.getter_a: </b></span>{{ store.getters.getter_a }}</p>
+  <p><span><b>B-store.getters['module_b/getter_b']: </b></span>{{ store.getters['module_b/getter_b'] }}</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>
+  <h3>对mutations的操作</h3>
+  <p><span><b>根-store.commit('mutation', {num: 7}): </b></span>
+    <button @click="root_mutation">点一下根store+7</button>
   </p>
-  <!-- 对actions的操作 -->
-  <p><span><b>store.commit({type: "increment", num: 5}): </b></span>
-    <button @click="inc_action1">如果count>50 点一下count+10</button>
+  <p><span><b>A-store.commit('mutation_a', {num: 8}): </b></span>
+    <button @click="moduleA_mutation">点一下state_a+8</button>
   </p>
-  <p><span><b>store.dispatch({type: 'inc_actions', num: 5}): </b></span>
-    <button @click="inc_action2">如果count>50 点一下count+8</button>
+  <p><span><b>B-store.commit('module_b/mutation_b', {num: 9}): </b></span>
+    <button @click="moduleB_mutation">点一下state_b+9</button>
   </p>
+
+    <!-- 对actions的操作 -->
+    <h3>对actions的操作</h3>
+    <p><span><b>根-store.dispatch('action', {num: 7}): </b></span>
+      <button @click="root_action">如果store>50 点一下store+10</button>
+    </p>
+    <p><span><b>A-store.dispatch('action_a', {num: 8}): </b></span>
+      <button @click="moduleA_action">如果state_a>50 点一下state_a+8</button>
+    </p>
+    <p><span><b>B-store.dispatch('module_b/action_b', {num: 9}): </b></span>
+      <button @click="moduleB_action">如果state_b>50 点一下state_b+9</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})
+
+// 根store的mutation操作
+const root_mutation = () => {
+  store.commit('mutation', {num: 7})
 }
-// 对象形式订阅mutations， type是mutations的名称
-const inc2 = () => {
-  store.commit({type: "increment", num: 5})
+
+// moduleA的mutation操作
+const moduleA_mutation = () => {
+  store.commit('mutation_a', {num: 8})
 }
-const inc_action1 = () => {
-  store.dispatch('inc_actions', {num: 7})
+
+// moduleB的mutation操作
+const moduleB_mutation = () => {
+  store.commit('module_b/mutation_b', {num: 9})
+}
+
+// 根store的action操作
+const root_action = () => {
+  store.dispatch('action', {num: 7})
+}
+
+// moduleA的action操作
+const moduleA_action = () => {
+  store.dispatch('action_a', {num: 8})
 }
 
-const inc_action2 = () => {
-  store.dispatch({type: 'inc_actions', num: 5})
+// moduleB的action操作
+const moduleB_action = () => {
+  store.dispatch('module_b/action_b', {num: 9})
 }
 
 </script>
diff --git a/src/views/OptionsAPIView.vue b/src/views/OptionsAPIView.vue
index e26436a..5e46869 100644
--- a/src/views/OptionsAPIView.vue
+++ b/src/views/OptionsAPIView.vue
@@ -1,59 +1,73 @@
 <template>
   <!-- 对state的操作 -->
-  <p><span><b>根store-this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
-  <p><span><b>moduleA-this.$store.state.module_a.state_a: </b></span>{{ this.$store.state.module_a.state_a }}</p>
-  <p><span><b>moduleA-this.$store.state.module_b.state_b: </b></span>{{ this.$store.state.module_b.state_b }}</p>
-<!--  <p><span><b>moduleB-this.$store.state.count: </b></span>{{ this.$store.module_b.state.state_b }}</p>-->
+  <h3>对state的操作</h3>
+  <p><span><b>根-this.$store.state.count: </b></span>{{ this.$store.state.count }}</p>
+  <p><span><b>A-this.$store.state.module_a.state_a: </b></span>{{ this.$store.state.module_a.state_a }}</p>
+  <p><span><b>B-this.$store.state.module_b.state_b: </b></span>{{ this.$store.state.module_b.state_b }}</p>
 
+  <!-- 对getters的操作 -->
+  <h3>对getters的操作</h3>
+  <p><span><b>根this.$store.getters.getter(3): </b></span>{{ this.$store.getters.getter(3) }}</p>
+  <p><span><b>A-this.$store.getters.getter_a: </b></span>{{ this.$store.getters.getter_a }}</p>
+  <p><span><b>B-this.$store.getters['module_b/getter_b']: </b></span>{{
+      this.$store.getters['module_b/getter_b']
+    }}</p>
 
-<!--  &lt;!&ndash; 对getters的操作，分为无参和传参 &ndash;&gt;-->
-<!--  <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>-->
-<!--  &lt;!&ndash; 对mutations的操作 &ndash;&gt;-->
-<!--  <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>-->
-<!--  &lt;!&ndash; 对actions的操作 &ndash;&gt;-->
-<!--  <p><span><b>this.$store.dispatch('inc_actions', {num: 7})}: </b></span>-->
-<!--    <button @click="inc_action1">如果count>50 点一下count+10</button>-->
-<!--  </p>-->
-<!--  <p><span><b>this.$store.dispatch({type: 'inc_actions', num: 5})}: </b></span>-->
-<!--    <button @click="inc_action2">如果count>50 点一下count+8</button>-->
-<!--  </p>-->
+  <!-- 对mutations的操作 -->
+  <h3>对mutations的操作</h3>
+  <p><span><b>根-this.$store.commit('mutation', {num: 7}): </b></span>
+    <button @click="root_mutation">点一下根store+7</button>
+  </p>
+  <p><span><b>A-this.$store.commit('mutation_a', {num: 8}): </b></span>
+    <button @click="moduleA_mutation">点一下state_a+8</button>
+  </p>
+  <p><span><b>B-this.$store.commit('module_b/mutation_b', {num: 9}): </b></span>
+    <button @click="moduleB_mutation">点一下moduleB+9</button>
+  </p>
+
+  <!-- 对actions的操作 -->
+  <h3>对actions的操作</h3>
+  <p><span><b>根-this.$store.dispatch('action', {num: 7}): </b></span>
+    <button @click="root_action">如果store>50 点一下store+10</button>
+  </p>
+  <p><span><b>A-this.$store.dispatch('action_a', {num: 8}): </b></span>
+    <button @click="moduleA_action">如果state_a>50 点一下state_a+8</button>
+  </p>
+  <p><span><b>B-this.$store.dispatch('module_b/action_b', {num: 9}): </b></span>
+    <button @click="moduleB_action">如果state_b>50 点一下state_b+9</button>
+  </p>
 </template>
 
 <script>
 export default {
   name: "OptionsAPIView",
-  // 通过computed来映射state数据
-  // computed: {
-  //   halfCount: function () {
-  //     console.log(this.$store)
-  //     return this.$store.state_a
-  //   }
-  // },
-//   methods: {
-//     // 属性形式订阅mutations
-//     inc: function () {
-//       this.$store.commit('increment', {num: 7})
-//     },
-//     // 对象形式订阅mutations， type是mutations的名称
-//     inc2: function () {
-//       this.$store.commit({
-//         type: "increment",
-//         num: 5
-//       })
-//     },
-//     inc_action1: function () {
-//       this.$store.dispatch('inc_actions', {num: 7})
-//     },
-//     inc_action2: function () {
-//       this.$store.dispatch({type: 'inc_actions', num: 5})
-//     }
-//   }
+
+  methods: {
+    // 根store的mutation操作
+    root_mutation: function () {
+      this.$store.commit('mutation', {num: 7})
+    },
+    // moduleA的mutation操作
+    moduleA_mutation: function () {
+      this.$store.commit('mutation_a', {num: 8})
+    },
+    // moduleB的mutation操作
+    moduleB_mutation: function () {
+      this.$store.commit('module_b/mutation_b', {num: 9})
+    },
+    // 根store的action操作
+    root_action: function () {
+      this.$store.dispatch('action', {num: 7})
+    },
+    // moduleA的action操作
+    moduleA_action: function () {
+      this.$store.dispatch('action_a', {num: 8})
+    },
+    // moduleB的action操作
+    moduleB_action: function () {
+      this.$store.dispatch('module_b/action_b', {num: 9})
+    }
+  }
 }
 </script>