Vuex入门（终章）—— module使用随便讲讲

本文转自https://blog.csdn.net/weixin_38788947/article/details/76034380

关于module的使用，为什么说随便讲讲，因为个人觉得module的分模块本身就毫无意义，如果分模块后可以部分加载什么的可能还有点性能上的优化，然而并没有，事实上在本系列的第一章我就阐述了vuex的初衷——公共状态管理。vuex被设计出来并不是为了代替Vue的，他只是一个工具而已，因此在实际使用过程中一般没必要去分成许多模块，一般公共状态就是公共状态，他不能被归类到某一模块中去，他是所有子模块共用的。下面进入随便讲讲：

1：Modules

由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂，store对象就会变得非常臃肿；为了解决这个问题，Vuex允许我们将store分隔成模块（module），每个模块拥有自己的state，mutation，action，getter，甚至是嵌套子模块。

const moduleA={
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}
const moduleB={
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}
const store=new Vuex.Store({
    modules:{
        a:moduleA,
        b:moduleB
    }
})
store.state.a
store.state.b

2：模块的局部状态

对于模块内部的mutation和getter，接受的第一个参数是模块的局部状态对象；

const moduleA={
    state:{count:0},
    mutations:{
        increment(state){
        //这是的state对象是模块的局部状态
        state.count++
        }
    },
    getters:{
        doubleCount(state){
            return state.count*2
        }
    }
}

同样，对于模块内部的action，局部状态通过context.state暴露出来，根节点状态则为content.rootState;

const moduleA={
    actions:{
        incrementIfOddOnRootSum({state,commit,rootState}){
            if((state.count+rootState.count)%2===1){
                commit('increment')
            }
        }
    }
}

对于模块内部的getter，根节点状态作为第三个参数暴露出来

const moduleA={
    getters:{
        sumWithRootCount(state,getters,rootState){
            return state.count+rootState.count
        }
    }
}

3：命名空间

默认情况下，模块内部的action ,mutation，getter是注册在全局命名空间的–这样使得多个模块能够对同一mutation或者action做出响应；如果希望你的模块更加自包含或者提高可重用性，你可以通过添加namespaced:true 的方式使其成为命名空间模块，当模块被注册后，他的所有getter,action，mutation都会自动根据模块注册的路径调整命名；

const store=new Vuex.Store({
    modules:{
        account:{
            namespaced:true,
            //模块北荣
            state:{},
            getters:
            {isAdmin(){}},//getters['account/isAdmin']
            actions:{
            login(){}},//dispatch['account/login']
            mutations:
            {login(){}},//commit('account/login')
            //嵌套模块
            modules:{
            //继承父模块的命名空间
                myPage:{
                    state:{},
                    getters:{
                    profile(){}// -> getters['account/profile']
                    }
                },
                //进一步嵌套命名空间
                post:{
                    namespaced:true,
                    state:{},
                    getters{
                    popular() // -> getters['account/posts/popular']
                    }
                }
            }
        }
    }
})

4：在命名空间模块内部访问全局内容

如果你希望使用全局state，getter；rootState跟rootGetter会作为第三，第四参数传入getter,也会通过context对象的属性传入action；如果需要在全局命名空间内部分发action或者提交mutation，将{root:true}最为第三个参数传给dispatch或者commit即可；

modules:{
    foo:{
        namespaced:true,
        getters:{
        //在这个模块的getter中，getters被局部化了
        //你可以使用getter的第四个参数来调用rootGetters
        someGetter(state,getters.rootState,rootGetters){
            getters.someOtherGetter
            rootGetters.someOtherGetter
            },
        someOtherGetter:state=>{}
        },
        actions:{
            //在这个模块中dispatch跟commit也被局部化了，他们可以接受root属性访问根dispatch或者commit
            someAction({dispatch,commit,getters,rootGetters}){
                getters.someGetter
                rootGetters.someGetter
                dispatch('someOtherAction')
                dispatch('someOtherAction',null,{root:true})
                dispatch('someMutation')
                dispatch('someMutation',null,{root:true})
            },
            someOtherAction(ctx,payload){}
        }
    }
}

5：带命名空间的绑定函数

当使用mapState，mapGetters，mapActions，mapMutations这些函数来绑定命名空间模块时，写起来可能比较繁琐

computed:{
    ...mapState({
        a:state=>state.some.nested.module.a,
        b:state=>state.some.nested.module.b
    })
},methods:{
    ...mapActions([
        'some/nested/module/foo',
        'some/nested/module/bar'
    ])
}