vuex 状态管理细致详解(二) module 模块化

1. 当项目较大时，单一state，就会十分庞大，管理和阅读，十分困难，此时使用vuex的另一个核心知识点module模块化

2. 模块化，顾名思义，就是将store分成不同的版块，按需分类，简单的定义方式

   import Vue from "vue"
   import Vuex from "vuex"
   VUe.use(Vuex)//使用插件
   export default new Vuex.store({
       state:{},//全局的state
       modules:{
           moduleA:{ //A模块
               state: { ... },
             mutations: { ... },
             actions: { ... },
             getters: { ... }
   		}
           }	
       }
       
   })
   

   这样就简单的定义了一个模块

   但是这并没有达到，我们想要的阅读性良好的感觉，我们应该将模块单独导出，定义成一个独立文件

   //moduleA.js
   const moduleA ={
       moduleA:{ //A模块
               state: { ... },
             mutations: { ... },
             actions: { ... },
             getters: { ... }
   		}
   }
   export default moduleA
       
                         
   //index.js 就是上面的文件中
                         
    import Vue from "vue"
   import Vuex from "vuex"
   import moduleA from"./moduleA.js"
   VUe.use(Vuex)//使用插件
   export default new Vuex.store({
       state:{},//根下的state
       modules:{
           moduleA: moduleA  //store.state.mofuleA 访问到状态
           }	
       }
       
   })   
       
   

   这样才是我们预期的阅读性良好，在外部文件可以通过this.$store.state.来访问

3. 模块局部状态(下面是文档中的例子)

   //细致解析模块中的参数
   //在局部中，接受的第一个参数为局部的state,在getters和actions中第三个参数，rootState，暴露的就是定义在原本store下的state，相当于全局的state，
   const moduleA = {
     state: { count: 0 },
     mutations: {
       increment (state) {
         // 这里的 `state` 对象是模块的局部状态
         state.count++
       }
     },
     getters: {
       doubleCount (state, getters, rootState) {
         return state.count * 2
       }
     },
        actions: {
       incrementIfOddOnRootSum ({ state, commit, rootState }) {
         if ((state.count + rootState.count) % 2 === 1) {
           commit('increment')
         }
       }
     }
   }
   

   4.使用方式

   //在需要的页面
   import {createNamespacedHelpers, mapState} from 'vuex'
   //结构赋值
   const{mapGetters,mapActions,mapMutations} = createNamespacedHelpers('moduleA')
   const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers('moduleB')
   export default{
    data() {
    return {
    }
    },
       //这样就能将想要的方法，变量解构到，当前页面，之后和正常使用一样，使用变量
    computed: {
    ...mapState({
    count : state => state.moduleA.count
    }),
    ...mapGetters(['doubleCount']),
    ...mapOtherGetters(['doubleCount'])
    },
    methods: {
    ...mapActions(['incrementIfOddOnRootSum']),
    ...mapMutations([' increment']),
    },
    created() {
    const pid = this.$route.query.pid
    this.loadDataAsync(keep, pid)
    }
   }