Vuex-状态管理模式-核心概念4-modules

Vuex-核心概念4—modules

Vuex 允许我们将 store 分割成模块（module）;
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

---

Vuex-状态管理的目录结构，转战Vuex 状态管理模式-项目结构
Vuex-核心概念1，转战state+getters
Vuex-核心概念2，转战mutations
Vuex-核心概念3，转战actions

1、将模块从 store 实例对象中抽出来

// 抽取出来的模块 
const moduleA = {
	state: {
		name: 'Tom'
	},
	mutations: {},
	getters: {},
	actions: {}
}

// store 实例对象
const store = new Vuex.Store({
	state: { count: 100 },
	mutations: {},
	getters: {},
	actions: {},
	modules: {
		a: moduleA
	}
})

• 组件中使用，会自动把 a 放到 rootState 中

<h2>{{$store.state.a.name}}</h1>

2、抽取的模块中的参数问题

const moduleA = {
	state: {
		name: 'Tom',
		age: 18
	},
	mutations: { 
		// 调用和 rootState 中一样，用 this.$store.commit() 
		updateAge (state) {
			state.age = 20
		}
	},
	getters: {
		updateName (state) {
			return state.name = 'Jery'
		},
		updateName2 (state, getters) {
			// getters 就是当前这个模块中的 getters 
			return getters.updateName + '222'
		},
		updateName3 (state, getters, rootState) {
			return getters.updateName2 + rootState.count
		}
	},
	actions: {
		setTimeOut(() => {
			aUpdateAge (context) {
				// 打印当前 context ,里面包括 rootState,rootGetters 等属性
				console.log(context)
				// 调用的是当前模块 moduleA 的mutations
				context.commit('updateAge')
			}
		})
	}
}

• 组件中调用

<h2>{{$store.state.a.age}}</h2>
<button @click="aUpdateAgeBtn">修改年龄</button>

<script>
export default {
	methods: {
		aUpdateAgeBtn () {
			this.$store.dispatch('aUpdateAge')	
		}
	}
}
</script>

————————————————
“业精于勤荒于嬉，行成于思毁于随 ”