add module

@@ -9,6 +9,7 @@
         <button @click="add">add</button>
         <button @click="add">add</button>
         <button @click="decrement">-</button>
         <button @click="decrement">-</button>
         <button @click="login">login</button>
         <button @click="login">login</button>
+        <button @click="incrementAsync">incrementAsync</button>
     </p>
     </p>
     <child :level="1">Hello world!</child>
     <child :level="1">Hello world!</child>
     <child :level="3">Hello world!</child>
     <child :level="3">Hello world!</child>
@@ -16,6 +17,7 @@
     <getters></getters>
     <getters></getters>
     <span>obj: {{obj}}</span>
     <span>obj: {{obj}}</span>
     <button @click="addObj">addObj</button>
     <button @click="addObj">addObj</button>
+    <module></module>
 </div>
 </div>
 </template>
 </template>
 
 
@@ -24,6 +26,7 @@ import counter from './components/counter.vue'
 import child from './components/child.vue'
 import child from './components/child.vue'
 import myParagraph from './components/myParagraph.vue'
 import myParagraph from './components/myParagraph.vue'
 import getters from './components/getters.vue'
 import getters from './components/getters.vue'
+import module from './components/module.vue'
 import { mapMutations } from 'vuex'
 import { mapMutations } from 'vuex'
 
 
 export default {
 export default {
@@ -65,17 +68,20 @@ export default {
         },
         },
         ...mapMutations({
         ...mapMutations({
           add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
           add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
-        })
+        }),
         // ...mapMutations([
         // ...mapMutations([
         //   'increment' // 映射 this.increment() 到 this.$store.commit('increment')
         //   'increment' // 映射 this.increment() 到 this.$store.commit('increment')
         // ]),
         // ]),
-
+        incrementAsync() {
+          this.$store.dispatch('incrementAsync')
+        }
     },
     },
     components: {
     components: {
         counter,
         counter,
         child,
         child,
         myParagraph,
         myParagraph,
-        getters
+        getters,
+        module
     }
     }
 }
 }
 </script>
 </script>

+<template lang="html">
+<div>
+  moduleA: {{moduleA}}
+  moduleB: {{moduleB}}
+</div>
+</template>
+
+<script>
+export default {
+  computed: {
+    moduleA(){
+      return this.$store.state.a.module
+    },
+    moduleB(){
+      return this.$store.state.b.module
+    }
+  }
+}
+</script>
+
+<style lang="css">
+</style>

@@ -3,6 +3,24 @@ import Vuex from 'vuex'
 
 
 Vue.use(Vuex)
 Vue.use(Vuex)
 
 
+const moduleA = {
+    state: {
+      module: 'A'
+    },
+    getters: {},
+    mutations: {},
+    actions: {}
+}
+
+const moduleB = {
+    state: {
+      module: 'B'
+    },
+    getters: {},
+    mutations: {},
+    actions: {}
+}
+
 const store = new Vuex.Store({
 const store = new Vuex.Store({
         state: {
         state: {
             count: 0,
             count: 0,
@@ -36,7 +54,24 @@ const store = new Vuex.Store({
             increment: state => state.count++,
             increment: state => state.count++,
             decrement: state => state.count--,
             decrement: state => state.count--,
             login: state => state.isLogin = true,
             login: state => state.isLogin = true,
-        addObj: state => state.obj = { ...state.obj, newProp: 123 }
+            addObj: state => state.obj = {...state.obj,
+                newProp: 123
+            }
+        },
+        actions: {
+            increment({ commit }) {
+                // 对象解构
+                commit('increment')
+            },
+            incrementAsync({ commit }) {
+                setTimeout(() => {
+                    commit('increment')
+                }, 1000)
+            }
+        },
+        modules: {
+            a: moduleA,
+            b: moduleB
         }
         }
 })
 })