Vuex简单使用学习四（modules）

一个项目足够大时，store（仓库）里面的state，getters，mutations，actions就会有很多，如果都放在一个store里面就感觉很混乱，使用modules可以把他们放到不同的文件中，每个modules都有自己的state，getters，mutations，actions

例如

				const moduleA={
                                        namespaced: true,
					state:{....},
					mutations:{...},
					actions:{...},
					getters:{...}
				}
				const moduleB={
                                        namespaced: true,
					state:{....},
					mutations:{...},
					actions:{...},
					getters:{...}
				}
				const store= new Vuex.Store({
					modules:{
						a:moduleA,
						b:moduleB
					}
				})
				store.state.a//moduleA的状态
				store.state.b//moduleB的状态

为了解决不同模块命名冲突的问题，将不同模块的namespaced:true

假如调用moduleB中的getters方法

const moduleB = {

	namespaced: true,
	state: {
		count: 0
	},
	getters: {
		sumCount(state, getters, rootState) {
			return state.count + rootState.count
		}

	}
}

this.$store.getters['b/sumCount']

module的mutation和getter接收的第一个参数是哦state当前模块的状态，第二个参数getter下的方法，第三个参数是其他模块中的状态（state）

如果是把store每个参拆分成一个个js如下

store
│  index.js
│  
├─moduleA
│      actions.js
│      getters.js
│      index.js
│      mutations.js
│      state.js
│      
└─moduleB
        actions.js
        getters.js
        index.js
        mutations.js
        state.js

 

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA'./moduleA';
import moduleB './moduleB';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  },
});

 

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
        namespaced: true,  //多出的一行
        state,
        mutations,
        actions,
        getters
};