vuex临时代码

src/store/index.js

@@ -1,32 +1,35 @@
 import {createStore} from "vuex";
+import {moduleA} from "@/store/modules/ModuleA";
+import {moduleB} from "@/store/modules/ModuleB";
 
 export default createStore({
+    modules: {
+        module_a: moduleA,
+        module_b: moduleB,
+    },
     state: {
-        count: 2,
+        count: 3,
     },
     getters: {
         // getter使用箭头函数来定义，默认必传参数时state，如果需要其余参数，可以使用嵌套头函数
-        doubleCount: (state) => {
-            return state.count * 2
+        getter: (state) => (n) => {
+            return state.count * n;
         },
-        moreCount: (state) => (n) => {
-            return state.count * n
-        }
     },
     mutations: {
         // payload用于携带参数
-        increment(state, payload) {
+        mutation(state, payload) {
             state.count += payload.num
         }
     },
     actions: {
-        inc_actions(content, payload) {
+        action(content, payload) {
             // 模拟异步操作
             setTimeout(() => {
                 // rep 模拟axios请求返回的数据
                 const rep = 3;
                 if (content.state.count > 50) {
-                    content.commit('increment', {num: rep+payload.num});
+                    content.commit('mutation', {num: rep + payload.num});
                 }
             }, 1000)
         }

src/store/modules/ModuleA.js

@@ -0,0 +1,20 @@
+export const moduleA = {
+    state: {
+        state_a: 1,
+    },
+    getters: {
+        getter_a: (state) => {
+            return state.state_a + 10;
+        }
+    },
+    mutations: {
+        mutation_a(state, payload) {
+            state.state_a + payload.num;
+        }
+    },
+    actions: {
+        action_a(content, payload){
+            content.commit('mutation_a', {num: payload.num})
+        }
+    }
+}

src/store/modules/ModuleB.js

@@ -0,0 +1,21 @@
+export const moduleB = {
+    namespaced: true,
+    state: {
+        state_b: 2,
+    },
+    getters: {
+        getter_b: (state) => {
+            return state.state_b + 10;
+        }
+    },
+    mutations: {
+        mutation_b: (state, payload) => {
+            state.state_b + payload.num;
+        }
+    },
+    actions: {
+        action_b: (content, payload) => {
+            content.commit('mutation_b', {num: payload.num})
+        }
+    }
+}

src/views/OptionsAPIView.vue

@@ -1,54 +1,59 @@
 <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>
-  <!-- 对actions的操作 -->
-  <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>
+  <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>-->
+
+
+<!--  &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>-->
 </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
-      })
-    },
-    inc_action1: function () {
-      this.$store.dispatch('inc_actions', {num: 7})
-    },
-    inc_action2: function () {
-      this.$store.dispatch({type: 'inc_actions', num: 5})
-    }
-  }
+  // 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})
+//     }
+//   }
 }
 </script>