本文共 1501 字，大约阅读时间需要 5 分钟。

modules的使用，是为了让vuex的数据结构更加清晰，也为了方便模块化的使用，将每一个模块的数据都单独存在放modules的一个对象里面。

modules: {     	  moduleA: {     	  	state: {     	  	  name: 'dx'  	  	},  	  	actions: {     	  		test: function () {               console.log('这是用来测试modules中的acitons')            }  	  	},  	  	mutations: {     	  		test1: function () {               console.log('这是用来测试modules中的mutations')            }  	  	},  	  	getters: {     	  		a: function (state){     	  		    return 1  	  		}  	  	}  	  }  	}

说简单一点，modules里面又可以是一个完整的store结构，在modules里面也还可以又modules，但是不建议这样做，一般只嵌套一层就可以了

每一个modules里面的state，如何被组件应用

如果在组件中想用到moduleA里面的数据name，

$store.moduleA.state.name

组件如果想要用modules中actions的东西，其实和直接调用actions里面的方法一样

$store.dispatch({   type: 'test',arguments: '这是参数'})

因为调用的方法是一样这就要求我们在写actions的方法时，名字不可以重复，即便是不同modules里面的actions方法，名字都是不可以重复的

组件中如果想要调用modules的mutations中的方法，调用到的方式和直接调用mutations的方法一致

$store.commit({   type: 'test',arguments: '这是参数'})

因为调用的方法是一样这就要求我们在写mutations的方法时，名字不可以重复，即便是不同modules里面的mutations方法，名字都是不可以重复的

组件如果想要调用modules中getters里面东西，和直接调用最外层的getters是一样的

{   {   $store.getters.a}}

modules中的getters，mutations想要用最外层的state，通过rootstate参数

b: function(state,getters,rootState){    	return rootState.name }

第一个参数用来使用自己模块中的state，

最外层的getters或者mutations想要使用modulea中的state

function1 (state) {     	  	return state.moduleA.name + '好帅'  }

modules中的getters调用最外层的getters 用rootGetters

function2 (state，rootGetters) {     	  	return rootGetters.funciton1  }