临时代码

src/views/OptionsAPIView.vue

@@ -1,17 +1,15 @@
 <template>
   <!-- 对state的操作 -->
   <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>
+  <p><span><b>根-count: </b></span>{{ count }}</p>
+  <p><span><b>A-state_a: </b></span>{{ state_a }}</p>
+  <p><span><b>B-state_b: </b></span>{{ 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>
+  <p><span><b>根-getter(3): </b></span>{{ getter(3) }}</p>
+  <p><span><b>A-getter_a: </b></span>{{ getter_a }}</p>
+  <p><span><b>B-getter_b: </b></span>{{ getter_b }}</p>
 
   <!-- 对mutations的操作 -->
   <h3>对mutations的操作</h3>
@@ -27,11 +25,11 @@
 
   <!-- 对actions的操作 -->
   <h3>对actions的操作</h3>
-  <p><span><b>根-this.$store.dispatch('action', {num: 7}): </b></span>
+  <p><span><b>根-mutation: </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>
+    <button @click="action_a">如果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>
@@ -39,10 +37,31 @@
 </template>
 
 <script>
+import {mapState, mapGetters, mapMutations, mapActions} from "vuex";
+
 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"])
+  },
   methods: {
+    // 映射全局的 mutations
+    ...mapMutations(["mutation", "mutation_a"]),
+    // 映射带有命名空间的mutations
+    ...mapMutations("module_b", ["mutation_b"]),
+    // 映射全局的 actions
+    ...mapActions(["action", "action_a"]),
+    // 映射带有命名空间的actions
+    ...mapActions("module_b", ["action_b"]),
+
     // 根store的mutation操作
     root_mutation: function () {
       this.$store.commit('mutation', {num: 7})
@@ -53,7 +72,7 @@ export default {
     },
     // moduleB的mutation操作
     moduleB_mutation: function () {
-      this.$store.commit('module_b/mutation_b', {num: 9})
+      this.$store.commit('mutation_b', {num: 9})
     },
     // 根store的action操作
     root_action: function () {
@@ -65,7 +84,7 @@ export default {
     },
     // moduleB的action操作
     moduleB_action: function () {
-      this.$store.dispatch('module_b/action_b', {num: 9})
+      this.$store.dispatch('action_b', {num: 9})
     }
   }
 }