vuex 的基本使用之Module

Module

首先介绍下基本的组件化规则：你可以根据项目组件的划分来拆分 store，每个模块里管理着当前组件的状态以及行为，最后将这些模块在根 store 进行组合。

const moduleA = {
    state: { ... },
    getters: { ... }
    mutations: { ... }
};

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

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
});

console.log(store.state.a); // moduleA 的 state

接下来看 Vuex 核心在模块化后的使用注意事项。

请参考上文 Vuex 核心知识 (2.0)

State

在 Vuex 模块化中，state 是唯一会根据组合时模块的别名来添加层级的，后面的 getters、mutations 以及 actions 都是直接合并在 store 下。

例如，访问模块 a 中的 state，要通过 store.state.a，访问根 store 上申明的 state，依然是通过 store.state.xxx 直接访问。

const moduleA = {
    state: {
        maState: 'A'
    }
};

const moduleB = {
    state: {
        mbState: 'B'
    }
};

const store = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    },
    state: {
        rtState: 'Root'
    }
});

console.log(store.state.a.maState); // A
console.log(store.state.b.mbState); // B
console.log(store.state.rtState); // Root

Getters

与 state 不同的是，不同模块的 getters 会直接合并在 store.getters 下

const moduleA = {
    state: {
        count: 1
    },
    getters: {
        maGetter(state, getters, rootState) {
            return state.count + rootState.b.count;
        }
    }
};

const moduleB = {
    state: {
        count: 2
    },
    getters: {
        mbGetter() {
            return 'Hello Vuex';
        }
    }
};

const store = {
    modules: {
        a: moduleA,
        b: moduleB
    }
};

console.log(store.getters.maGetter); // 3
console.log(store.getters.mbGetter); // Hello Vuex

在上文我们介绍过 getters 的回调函数所接收的前两个参数，模块化后需要用到第三个参数——rootState。参数： 1. state，模块中的 state 仅为模块自身中的 state；2. getters，等同于 store.getters；3. rootState，全局 state。

通过 rootState，模块中的 getters 就可以引用别的模块中的 state 了，十分方便。

注意：由于 getters 不区分模块，所以不同模块中的 getters 如果重名，Vuex 会报出 'duplicate getter key: [重复的getter名]' 错误。

Mutations

mutations 与 getters 类似，不同模块的 mutation 均可以通过 store.commit 直接触发。

const moduleA = {
    state: {
        count: 1
    },
    mutations: {
        sayCountA(state) {
            console.log('Module A count: ', state.count);
        }
    }
};

const moduleB = {
    state: {
        count: 2
    },
    mutations: {
        sayCountB(state) {
            console.log('Module B count: ', state.count);
        }
    }
};

const store = {
    modules: {
        a: moduleA,
        b: moduleB
    }
};

store.commit('sayCountA'); // Module A count: 1
store.commit('sayCountB'); // Module B count: 2

mutation 的回调函数中接收唯一的参数——当前模块的 state。如果不同模块中有同名的 mutation，Vuex 不会报错，通过 store.commit 调用，会依次触发所有同名 mutation。

（注意：唯一的参数位置是指非payload参数位置）

Actions

与 mutations 类似，不同模块的 actions 均可以通过 store.dispatch 直接触发。

const moduleA = {
    state: {
        count: 1
    },
    mutations: {
        sayCountA(state) {
            console.log('Module A count: ', state.count);
        }
    },
    actions: {
        maAction(context) {
            context.dispatch('mbAction');
        }
    }
};

const moduleB = {
    state: {
        count: 2
    },
    mutations: {
        sayCountB(state, num) {
            console.log('Module B count: ', state.count+num);
        }
    },
    action: {
        mbAction({ commit, rootState }) {
            commit('sayCountA');
            commit('sayCountB', rootState.a.count);
        }
    }
};

const store = {
    modules: {
        a: moduleA,
        b: moduleB
    }
};

store.dispatch('maAction'); // Module A count: 1、Module B count: 3

从上例可以看出，action 的回调函数接收一个 context 上下文参数，context 包含：1. state、2. rootState、3. getters、4.rootGetters，5. commit、6. dispatch 属性，为了简便可以在参数中解构{ dispatch, commit, state}。

在 action 中可以通过 context.commit 跨模块调用 mutation，同时一个模块的 action 也可以调用其他模块的 action。

同样的，当不同模块中有同名 action 时，通过 store.dispatch 调用，会依次触发所有同名 actions。

在定义了namedspaced为true后，若需要在全局命名空间内dispatch action 或commit mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。
modules:{
　　foo:{
　　　　namedspace:true,
　　　　actions: {
　　　　　　someAction ({ dispatch, commit, getters, rootGetters }) {
　　　　　　　　getters.someGetter // -> 'foo/someGetter'
　　　　　　　　rootGetters.someGetter // -> 'someGetter'
　　　　　　　　dispatch('someOtherAction') // -> 'foo/someOtherAction'
　　　　　　　　dispatch('someRootAction', null, { root: true }) // -> 'someRootAction'
　　　　　　　　commit('someMutation') // -> 'foo/someMutation'
　　　　　　　　commit('someRootMutation', null, { root: true }) // -> 'someRootMutation'
　　　　　　},
　　　　　　someOtherAction (ctx, payload) { ... }

　　}
}

最后有一点要注意的是，将 store 中的 state 绑定到 Vue 组件中的 computed 计算属性后，对 state 进行更改需要通过 mutation 或者 action，在 Vue 组件中直接进行赋值 (this.myState = 'ABC') 是不会生效的。