add module

@@ -9,6 +9,7 @@
         <button @click="add">add</button>
         <button @click="decrement">-</button>
         <button @click="login">login</button>
+        <button @click="incrementAsync">incrementAsync</button>
     </p>
     <child :level="1">Hello world!</child>
     <child :level="3">Hello world!</child>
@@ -16,6 +17,7 @@
     <getters></getters>
     <span>obj: {{obj}}</span>
     <button @click="addObj">addObj</button>
+    <module></module>
 </div>
 </template>
 
@@ -24,6 +26,7 @@ import counter from './components/counter.vue'
 import child from './components/child.vue'
 import myParagraph from './components/myParagraph.vue'
 import getters from './components/getters.vue'
+import module from './components/module.vue'
 import { mapMutations } from 'vuex'
 
 export default {
@@ -65,17 +68,20 @@ export default {
         },
         ...mapMutations({
           add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
-        })
+        }),
         // ...mapMutations([
         //   'increment' // 映射 this.increment() 到 this.$store.commit('increment')
         // ]),
-
+        incrementAsync() {
+          this.$store.dispatch('incrementAsync')
+        }
     },
     components: {
         counter,
         child,
         myParagraph,
-        getters
+        getters,
+        module
     }
 }
 </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,41 +3,76 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
-const store = new Vuex.Store({
+const moduleA = {
     state: {
-        count: 0,
-        size: 10,
-        isLogin: false,
-        todos: [{
-            id: 1,
-            text: '...',
-            done: true
-        }, {
-            id: 2,
-            text: '...',
-            done: false
-        }],
-        obj: {
-          size: 1
-        }
+      module: 'A'
+    },
+    getters: {},
+    mutations: {},
+    actions: {}
+}
+
+const moduleB = {
+    state: {
+      module: 'B'
     },
-    getters: {
-        doneTodos: state => {
-            return state.todos.filter(todo => todo.done)
+    getters: {},
+    mutations: {},
+    actions: {}
+}
+
+const store = new Vuex.Store({
+        state: {
+            count: 0,
+            size: 10,
+            isLogin: false,
+            todos: [{
+                id: 1,
+                text: '...',
+                done: true
+            }, {
+                id: 2,
+                text: '...',
+                done: false
+            }],
+            obj: {
+                size: 1
+            }
+        },
+        getters: {
+            doneTodos: state => {
+                return state.todos.filter(todo => todo.done)
+            },
+            doneTodosCount: (state, getters) => {
+                return getters.doneTodos.length
+            }
+        },
+        mutations: {
+            // increment (state, payload) {
+            //   state.count += payload.amount
+            // },
+            increment: state => state.count++,
+            decrement: state => state.count--,
+            login: state => state.isLogin = true,
+            addObj: state => state.obj = {...state.obj,
+                newProp: 123
+            }
         },
-        doneTodosCount: (state, getters) => {
-          return getters.doneTodos.length
+        actions: {
+            increment({ commit }) {
+                // 对象解构
+                commit('increment')
+            },
+            incrementAsync({ commit }) {
+                setTimeout(() => {
+                    commit('increment')
+                }, 1000)
+            }
+        },
+        modules: {
+            a: moduleA,
+            b: moduleB
         }
-    },
-    mutations: {
-        // increment (state, payload) {
-        //   state.count += payload.amount
-        // },
-        increment: state => state.count++,
-        decrement: state => state.count--,
-        login: state => state.isLogin = true,
-        addObj: state => state.obj = { ...state.obj, newProp: 123 }
-    }
 })
 
 export default store