6、module

介绍

本文是学习vuex时做的笔记，所有笔记内容请看 vuex学习笔记

module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变的相当臃肿。
为了解决以上问题，Vuex允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter 甚至是嵌套子模块-从上至下进行同样方式的分割：

const moduleA = {
    state:{ ... },
    mutations:{},
    actions:{},
    getters:{}
}
const moduleB={
    state:{},
    mutations:{},
    actions:{}
}

const store = new Vuex.Store({
    modules:{
        a:moduleA,
        B:moduleB
    }
})
store.state.a;// ->moduleA的状态
store.state.b;// ->moduleB的状态

模块的局部状态

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

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

对于模块内部的action，局部状态通过 context.state 暴露出来，根节点状态则为context.rootState。对于模块内部的内部的getter，根节点状态会作为第三个参数暴露出来

const moduleA = {
    //。。。
    getters:{
        // rootState 为根节点状态
        sumWithRootCount(state,getters,rootState){
            return state.count + rootState.count
        }
    },
    actions:{
        // rootState 为根节点状态
        incrementIfOddOnRootSum({state,commit,rootState}){
            //。。。
        }
    }
}

命名空间

默认情况下，模块内的action、mutation和getter是注册在全局的命名空间的-多个模块能够对同意mutation 和action 做出响应（即可以直接根据mutation、getter、和action的名字进行访问。但这样当不同模块中存在相同名字的mutation、getter、action时，会出现问题）。
可以通过添加 namespaced：true的方式使其成为带命名的空间的模块，可以使模块具有更高的封装度和复用性。当模块被注册后，它的所有的getter、action 及mutation 都会自动根据模块注册的路径调整命名。如下所示：

const store = new Vuex.Store({
    modules:{
        account:{
            namespaced:true,
            
            // 模块内容
            // 可以直接使用store.state.accout 访问account的属性
            state:{},// 模块内的状态已经嵌套的，使用'namespaced'属性不会对其产生影响
            getters:{
                isAdmin(){}//->this.$store.getters['account/isAdmin']
            },
            actions:{
                login(){}// ->this.$store.dispatch('account/login')
            }
            mutations:{
                login(){}// ->this.$store.commit('account/login')
            },
            
            // 嵌套模块
            modules:{
                //没有使用namespaced:true 如下会默认继承父模块的命名空间
                myPage:{    
                    state:{},
                    getters:{
                        profile(){}// ->getters['account/profile']
                    }
                },
                
                //使用了namespaced:true ,进一步嵌套命名空间
                posts:{
                    namespaced:true,
                    state:{...},
                    getters:{
                        popular(){}//->getters['account/posts/popular']
                    }
                }
            }
        }
    }
})

使用了命名空间的 getter 和 action 会收到局部化的getter、dispatch 和commit。即在使用模块内容时不需要在同一模块内额外添加命空间名前缀。（即不需要在同一个模块中在调用其它mutation、getter、action时使用命名空间前缀）。

在带命名空间的模块内访问全局内容

如果使用全局的state 和getter，rootState 和rootGetters 会作为第三和第四个参数传入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 // -> 'foo/someOtherGetter'
        // 调用全局的getter
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        // 调用全局getter
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        // 分发全局的action
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

在带命名空间的模块注册全局action

若需要在带命名空间的模块注册全局action，可以添加root:true，并将这个action的定义放在函数handler中，如下：

{
    actions:{
        someOtherAction({dispatch}){
            dispatch('someAction')
        }
    },
    modules:{
        foo:{
            namespaced:true,
            actions:{
                someAction:{
                    // ->'someAction'
                    root:true
                    handler (namespacedContext,payload){..}
                }
            }
        }
    }
}

带命名空间的绑定函数

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

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

对于这种情况，可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定的都会自动将该模块作为上下文。于是上面的例子可以简化为：

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