首页
登录 | 注册

vuex学习七----Modules

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']
                    }
                }
            }
        }
    }
})

启用了命名空间的getter和action会收到局部化的getter,dispatch,commit。你在使用了模块内容时不需要再同一个模块内部额外添加空间名前缀。更改namespaced属性后不需要修改模块内的代码;

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'
    ])
}

对于上述情况,可以将模块的空间名称字符串作为第一个参数传递给上述函数,

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

相关文章

  • 从虚拟化前端Bug学习分析Kernel Dump
    前言 也许大家都知道,分析 Kernel Dump 有个常用的工具叫 Crash,在我刚开始学习分析 Kernel Dump 的时候,总是花大量的时间折腾这个工具的用法,却总是记不住这个工具的功能.后来有一次在参加某次内部分享的时候,有位大 ...
  • 贾扬清:我对人工智能方向的一点浅见
    阿里妹导读:作为 AI 大神,贾扬清让人印象深刻的可能是他写的AI框架Caffe ,那已经是六年前的事了.经过多年的沉淀,成为"阿里新人"的他,对人工智能又有何看法?最近,贾扬清在阿里内部分享了他的思考与洞察,欢迎共同探 ...
  • 六西格玛设计DFSS在研发管理中是怎么应的
    六西格玛设计DFSS在研发管理中是怎么应用的? 现如今,六西格玛管理的知名度是越来越高了,很多企业为了能够更好的发展,开始选择实施六西格玛管理,并且已经有企业成功的检验推行六西格玛管理会给企业带来显着的成效.那么,六西格玛设计在研发管理中是 ...
  • 微软发布人工智能教育与学习共建社区
    步入2019,人工智能(Artificial Intelligence)的浪潮依然汹涌,各国对于AI人才的需求进一步加大:2月,美国总统特朗普签署行政命令,正式启动美国人工智能计划:加拿大正通过"全球技能战略签证"吸引国 ...
  • 云原生的新思考,为什么容器已经无处不在了
    4月24日,中国信息通信研究院主办的首届云原生产业大会在北京举行,在<云原生数字引领未来>的主题演讲中,阿里云容器服务总监易立表示:"云原生不但可以很好的支持互联网应用,也在深刻影响着新的计算架构.新的智能数据应用.以 ...
  • 90后ACE成长记——从偏居一隅小城里走出的核心技术人
    <ACE成长记>栏目说明 名词解释: 阿里云工程师,简称 ACE (Alibaba Cloud Engineer),代表云计算的爱好者,是最"王牌"(ACE)的一群开发者,也是未来的MVP. ACE 是遍布在 ...

2019 jeepshoe.net webmaster#jeepshoe.net
13 q. 0.326 s.
京ICP备10005923号