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

柔光的暖阳◎ 2021-09-16 06:48 435阅读 0赞

本文转自[https://blog.csdn.net/weixin\_38788947/article/details/76034380][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'
        ])
    }

[https_blog.csdn.net_weixin_38788947_article_details_76034380]: https://blog.csdn.net/weixin_38788947/article/details/76034380