深入理解Vuex 模块化(module)

当一个项目比较大时，所有的状态都集中在一起会得到一个比较大的对象，进而显得臃肿，难以维护。为了解决这个问题，Vuex允许我们将store分割成模块（module），每个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 // moduleA的状态
store.state.b // moduleB的状态

例如一个项目有很多的数据，可以把这些数据分成模块化，方便统一维护

命名空间

上面所有的例子中，模块内部的action、mutation、getter是注册在全局命名空间的，如果你在moduleA和moduleB里分别声明了命名相同的action或者mutation或者getter（叫some），当你使用store.commit('some')，A和B模块会同时响应。所以，如果你希望你的模块更加自包含和提高可重用性，你可以添加namespaced: true的方式，使其成为命名空间模块。当模块被注册后，它的所有getter，action，mutation都会自动根据模块注册的路径调用整个命名，例如：

			let car={
				namespaced:true,
				state:{
					
					goods:[
						{id:0,name:'苹果',price:100,num:3},
						{id:1,name:'华为',price:200,num:4}
					]
				},
				getters:{
					totalPrice:state=>{
						let total=0;
						state.goods.forEach(item=>{
							total+=item.price*item.num;
						})
						return total
					},
					goodPrice(state){
						let goods=state.goods;
						goods.forEach(item=>{
							item.goodsPrice=item.num*item.price
						})
						return goods;
					}
				},
				mutations:{
					add(state,index){
						
						state.goods[index].num++;
					},
					jian(state,index){
						let num=state.goods[index].num;
						if(num<=0){
							 state.goods[index].num=0
						}else{
							state.goods[index].num--;
						}
					},
					deletes(state,index){
						state.goods.splice(index,1)
					}
				}
			}

namespaced: true表示局部的，只能在声明的car里面使用，例如car在组件中使用，使用方法如下：

let store=new Vuex.Store({
				modules:{
					lsits,
					car
					
				}
			})
例如这是一个组件
var car={
				template:'#list',
				data(){
					return {
						
					}
				},
				computed:{
					totalPrice(){
						return this.$store.getters['car/totalPrice'];
					},
					goods(){
						return this.$store.getters['car/goodPrice'];
					}
				},
				mounted(){
					console.log(this.$store.state.car)
				},
				methods:{
					add(index){
						this.$store.commit('car/add',index)
					},
					jian(index){
						this.$store.commit('car/jian',index)
					},
					deletes(index){
						this.$store.commit('car/deletes',index)
					}
				}

			}

this.$store.getters['模块名称/方法']

或者使用this.$store.state.car.goods;