Add & modify files to realize vuex modularization

vuex_demo1/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vuex_demo1_1",
+  "name": "vuex_demo1",
   "version": "0.1.0",
   "private": true,
   "scripts": {

vuex_demo1/src/components/add.vue

@@ -1,11 +1,11 @@
 <!--moguyun-->
 <template>
 <div>
-    <h3>当前最新的count值为：{{$store.state.count}}</h3>
+    <h3>当前最新的count值为：{{$store.state.countOptions.count}}</h3>
     <button @click="addcount">+1</button>
     <button @click="btnhandle">+1 Async</button>
     <button @click="btnhandle1">+5 Async</button>
-    <h3>{{$store.getters.showNum}}</h3>
+    <h3>{{$store.getters['countOptions/showNum']}}</h3>
 </div>
 </template>
 
@@ -18,16 +18,17 @@ export default {
     },
     methods: {
         addcount(){
-            this.$store.commit('add')
+           this.$store.commit('countOptions/add')
         },
         //异步让count自增1
         btnhandle(){
             //dispatch函数专门用来触发action
-            this.$store.dispatch('addAsync')
+            this.$store.dispatch('countOptions/addAsync')
         },
         btnhandle1(){
-            this.$store.dispatch('addNAsync',5)
+            this.$store.dispatch('countOptions/addNAsync',5)
         }
-    }
+    },
+
 }
 </script>

vuex_demo1/src/components/box.vue

@@ -14,11 +14,11 @@ export default {
     },
     methods:{
         divide(num){
-            this.$store.commit('divide',num)
+            this.$store.commit('countOptions/divide',num)
         }
     },
     computed:{
-        ...mapState(['count'])
+        ...mapState('countOptions',['count'])
     }
 }
 </script>

vuex_demo1/src/components/sub.vue

@@ -16,12 +16,12 @@ export default {
         return{ }
     },
     methods:{
-        ...mapMutations(['subN','xc']),
-        ...mapActions(['subNAsync']),
+        ...mapMutations('countOptions',['subN','xc']),
+        ...mapActions('countOptions',['subNAsync']),
     },
     computed:{
-        ...mapState(['count']),
-        ...mapGetters(['showNum','showNum1'])
+        ...mapState('countOptions',['count']),
+        ...mapGetters('countOptions',['showNum','showNum1'])
     }
 }
 </script>

vuex_demo1/src/store/count.js

@@ -0,0 +1,55 @@
+export default {
+  namespaced: true,
+  state: {
+      //存放全局共享数据
+      count:0
+    },
+    getters: {
+      showNum(state){
+        let newcount = state.count *2
+        return '测试getters,更新的数量为count*2: '+ newcount
+      },
+      showNum1(state){
+        let newcount = state.count *3
+        return '测试getters,更新的数量为为count*3: '+ newcount
+      }
+    },
+    mutations: {
+      //变更store中的数据
+      add(state){
+        state.count++
+      },
+      addN(state,step){
+        state.count+=step
+      },
+      sub(state){
+        state.count--
+      },
+      subN(state,step){
+        state.count-=step
+      },
+      xc(state,step){
+        state.count=state.count * step
+      },
+      divide(state,num){
+        state.count = state.count / num
+      }
+    },
+    actions: {
+      addAsync(context){
+        setTimeout(()=>{
+          context.commit('add')
+        },1000)
+      },
+      addNAsync(context,step){
+        setTimeout(()=>{
+          context.commit('addN',step)
+        },1000)
+      },
+      subNAsync(context,step){
+        setTimeout(()=>{
+          context.commit('subN',step)
+        },1000)
+      }
+    },
+}

vuex_demo1/src/store/index.js

@@ -2,61 +2,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import countOptions from '@/store/count'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    //存放全局共享数据
-    count:0
-  },
-  getters: {
-    showNum(state){
-      let newcount = state.count *2
-      return '测试getters,更新的数量为count*2: '+ newcount
-    },
-    showNum1(state){
-      let newcount = state.count *3
-      return '测试getters,更新的数量为为count*3: '+ newcount
-    }
-  },
-  mutations: {
-    //变更store中的数据
-    add(state){
-      state.count++
-    },
-    addN(state,step){
-      state.count+=step
-    },
-    sub(state){
-      state.count--
-    },
-    subN(state,step){
-      state.count-=step
-    },
-    xc(state,step){
-      state.count=state.count * step
-    },
-    divide(state,num){
-      state.count = state.count / num
-    }
-  },
-  actions: {
-    addAsync(context){
-      setTimeout(()=>{
-        context.commit('add')
-      },1000)
-    },
-    addNAsync(context,step){
-      setTimeout(()=>{
-        context.commit('addN',step)
-      },1000)
-    },
-    subNAsync(context,step){
-      setTimeout(()=>{
-        context.commit('subN',step)
-      },1000)
-    }
-  },
   modules: {
+    countOptions
   }
 })