完成 mapState mapGetters mapMutations mapActions

src/store/modules/ModuleB.js

@@ -18,6 +18,6 @@ export const moduleB = {
             if (content.state.state_b > 50) {
                 content.commit('mutation_b', {num: payload.num})
             }
-        }
+        },
     }
 }

src/views/OptionsAPIView.vue

@@ -13,27 +13,44 @@
 
   <!-- 对mutations的操作 -->
   <h3>对mutations的操作</h3>
-  <p><span><b>根-this.$store.commit('mutation', {num: 7}): </b></span>
-    <button @click="root_mutation">点一下根store+7</button>
+  <p><span><b>根-@click="mutation({num: 7})": </b></span>
+    <button @click="mutation({num: 7})">点一下根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><span><b>A-@click="mutation_a({num: 8})": </b></span>
+    <button @click="mutation_a({num: 8})">点一下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><span><b>B-@click="mutation_b({num: 9})": </b></span>
+    <button @click="mutation_b({num: 9})">点一下moduleB+9</button>
   </p>
 
   <!-- 对actions的操作 -->
   <h3>对actions的操作</h3>
-  <p><span><b>根-mutation: </b></span>
-    <button @click="root_action">如果store>50 点一下store+10</button>
+  <p><span><b>根-@click="action({num: 7})": </b></span>
+    <button @click="action({num: 7})">如果store>50 点一下store+10</button>
   </p>
-  <p><span><b>A-this.$store.dispatch('action_a', {num: 8}): </b></span>
-    <button @click="action_a">如果state_a>50 点一下state_a+8</button>
+  <p><span><b>A-@click="action_a({num: 8})": </b></span>
+    <button @click="action_a({num: 8})">如果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><span><b>B-@click="action_b({num: 9})": </b></span>
+    <button @click="action_b({num: 9})">如果state_b>50 点一下state_b+9</button>
   </p>
+
+  <h3>混合用法</h3>
+  <p><span><b>state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a: </b></span>{{
+      state_b_getter_a
+    }}</p>
+  <p><span><b>state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"]: </b></span>{{
+      state_a_getter_b
+    }}</p>
+  <p><span><b>state_b_getter_b: (state, getters) => state.state_b + getters.getter_b: </b></span>{{ state_b_getter_b }}
+  </p>
+  <p><span><b>@click="mutation_a_count(100): </b></span>
+    <button @click="mutation_a_count(100)">如果state_a>50 点一下state_a+100</button>
+  </p>
+  <p><span><b>@click="action_b_count(200): </b></span>
+    <button @click="action_b_count(200)">如果state_b>50 点一下state_b+200</button>
+  </p>
+
 </template>
 
 <script>
@@ -43,49 +60,87 @@ export default {
   name: "OptionsAPIView",
   // computed 用于 mapState和mapGetters
   computed: {
-    // 映射全局state，数组形式, state名称就是map后的名称
-    ...mapState(["count", "state_a"]),
-    // 映射带有名称空间的state，数组形式，第一个参数为模块的别名
-    ...mapState("module_b", ["state_b"]),
-    // 映射全局Getters 数组形式
-    ...mapGetters(["getter", "getter_a"]),
-    // 映射带有命名空间的Getters，数组形式
-    ...mapGetters("module_b", ["getter_b"])
+    // // 数组形式
+    // // 映射全局state
+    // ...mapState(["count", "state_a"]),  // state名称就是map后的名称，这里模块中的state是无法映射的
+    // // 映射带有名称空间的state
+    // ...mapState("module_b", ["state_b"]),  // 第一个参数为模块的别名
+    //
+    // // 映射全局Getters
+    // ...mapGetters(["getter", "getter_a"]),
+    // // 映射带有命名空间的Getters
+    // ...mapGetters("module_b", ["getter_b"]),
+
+    // 对象形式
+    // 映射全局state和带有namespaced命名空间的state
+    ...mapState({
+      count: "count",
+      state_a: state => state.module_a.state_a,
+      // state_b: state => state.module_b.state_b
+    }),
+    // 指定命名空间的state映射
+    ...mapState("module_b", {
+      state_b: state => state.state_b
+    }),
+
+    // 映射全局Getters
+    ...mapGetters({
+      getter: "getter",
+      getter_a: "getter_a"
+    }),
+    // 映射带有命名空间的Getters
+    ...mapGetters("module_b", {
+      getter_b: "getter_b",
+    }),
+
+    // 混合用法
+    ...mapState({
+      state_b_getter_a: (state, getters) => state.module_b.state_b + getters.getter_a,
+      state_a_getter_b: (state, getters) => state.module_a.state_a + getters["module_b/getter_b"],
+    }),
+    ...mapState("module_b", {
+      state_b_getter_b: (state, getters) => state.state_b + getters.getter_b,
+    })
+
   },
   methods: {
-    // 映射全局的 mutations
-    ...mapMutations(["mutation", "mutation_a"]),
+    // // 数组形式
+    // // 映射全局的 mutations
+    // ...mapMutations(["mutation", "mutation_a"]),
+    // // 映射带有命名空间的mutations
+    // ...mapMutations("module_b", ["mutation_b"]),
+    // // 映射全局的 actions
+    // ...mapActions(["action", "action_a"]),
+    // // 映射带有命名空间的actions
+    // ...mapActions("module_b", ["action_b"]),
+
+    // 对象形式
+    // 映射全局的mutations
+    ...mapMutations({
+      mutation: "mutation",
+      mutation_a: "mutation_a",
+    }),
     // 映射带有命名空间的mutations
-    ...mapMutations("module_b", ["mutation_b"]),
-    // 映射全局的 actions
-    ...mapActions(["action", "action_a"]),
-    // 映射带有命名空间的actions
-    ...mapActions("module_b", ["action_b"]),
+    ...mapMutations("module_b", {
+      mutation_b: "mutation_b",
+    }),
+    // 映射全局的actions
+    ...mapActions({
+      action: "action",
+      action_a: "action_a"
+    }),
+    // 映射带有命名空间namespaced的actions
+    ...mapActions("module_b", {
+      action_b: "action_b"
+    }),
+    // 组合用法
+    ...mapMutations({
+      mutation_a_count: (commit, count) => commit("mutation_a", {num: count})
+    }),
+    ...mapActions("module_b", {
+      action_b_count: (dispatch, count) => dispatch("action_b", {num: count})
+    })
 
-    // 根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('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('action_b', {num: 9})
-    }
   }
 }
 </script>