Vuex-状态管理模式-核心概念2-mutations

Vuex-核心概念2—mutations

mutations 唯一改变 state 的地方

官方提供的图解

---

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

1、mutations 传参

const store = new Vuex.store({
	state: {
		count: 100,
		stuArr: [
			{name: 'Tom', age: 16},
			{name: 'Jack', age: 20}
		]
	},
	mutations: {
		addCountOne (state) {
			state.count++
		},
		addCountTwo (state, num) {
			state.count + num
		},
		addStuNum (state, stu) {
			state.stuArr.push(stu)
		}
	}
	...
})

• 组件中使用(this.$store.commit(‘xxxx’))

<h2>{{$store.state.count}}</h2>
<button @click="addCountOneNum">+</button>
<button @click="addCountTwoNum(5)">+5</button>
<button @click="addCountTwoNum(10)">+10</button>
<h2>{{$store.state.stuArr}}</h2>
<button @click="addStuNum">添加一个对象</button>

<script>
export default {
	methods: {
		addCountOneNum () { // 一个参数
			this.$store.commit('addCountOne')
		},
		addCountTwoNum (num) { // 两个参数
			this.$store.commit('addCountTwo', num)
		},
		addStuNum () {
			let stu = {name: '沈玦', age: 20}
			this.$store.commit('addStuNum', stu)
		}
	}
}
</script>

2、mutations 提交风格

• 如果提交的是一个对象，那么写成对象形式提交

/**
*state: 状态
*payload: 载荷
*addCount: 事件对象——提交的时候 type: '事件对象'
*(){...}: 回调函数
*/
mutations: {
	addCount (state, payload) {
		state.count = payload.count
	}
}

• 组件中使用

<h2>{{$store.state.count}}</h2>
<button @click="addCountNum(123)">提交对象中的某个属性</button>

<script>
export default {
	methods: {
		addCountNum (count) {
			this.$store.commit({
				type: 'addCount', // 事件对象
				//count: count
				count // ES6 语法
			})
		}
	}
}
</script>

3、mutations 响应规则

1)state 中的属性都会被加入到相应式系统中，响应式系统会监听属性的变化；当属性发生变化的时候，会通知页面上用到该属性的地方，让界面发生刷新

state: {
	info: {
		name: 'Tom',
		age: 100,
		height: 1.92
	}
},
mutations: {
	updateInfo (state) {
		state.info.name = 'Jery'
	}
}

• 组件中使用

<h2>{{$store.state.info}}</h2>
<button @click="updateInfoName">修改Name</button>

<script>
export default {
	methods: {
		updateInfoName () {
			this.$store.commit('updateInfo')
		}
	}
}
</script>

2）响应式的数据必须是事先在 state 中定义过的才有效，如果按照如下的方式添加数据，虽然 info 对象中添加成功了，但是页面上并不会刷新

mutations: {
	updateInfo (state) {
		state.info['address'] = '魔仙堡'
	}
}

• 组件中使用

<h2>{{$store.state.info}}</h2>
<button @click="updateInfoAdd">添加属性</button>

<script>
export default {
	methods: {
		updateInfoAdd () {
			this.$store.commit('updateInfo')
		}
	}
}
</script>

3)解决上述存在的问题，使用 Vue.set() 和 Vue.delete() 进行数据的响应式变化

mutations: {
	updateInfo (state) {
		//state.info['address'] = '魔仙堡'
		Vue.set(state.info, 'address', '魔仙堡') // 添加属性
		// delete state.info.age
		Vue.delete(state.info, 'age') // 删除属性
	}
}

4、mutations 常量类型

注意：

1）形如此类的抛出 export default xxx
导入时 import xxx from './..'

---

2）形如此类抛出 export const UPDATEINFO = 'updateInfo'
导入时 import {xxx} from './..'

• 一般在调用 mutations 时，直接写事件对象，不利于维护，极易出错，不推荐。那么将其定义成常量，解决上述问题

1）在 src/mutations-types.js

export const UPDATEINFO = 'updateInfo'
export const UPDATECOUNT = 'updateCount'

2)在 src/index.js 中导入 新建的 mutations-types.js

mutations: {
	[UPDATEINFO](state) {
		Vue.set(state.info, 'address', '魔仙堡') // 添加属性
	}
}

3)在使用的组件中导入

import {UPDATEINFO, UPDATECOUNT} from './...'
export default {
	methods: {
		updateInfoAdd () {
			this.$store.commit(UPDATEINFO)
		}
	}
}

———————————————
“等一轮凡尘，化几世恩恩怨怨”