Appearance
Mutation 的基本使用
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation：
javascript
{
mutations: {
increment (state) {
state.count++
},
decrement(state){
state.count--
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Mutation 携带数据
很多时候我们在提交 mutation 的时候，会携带一些数据，这个时候我们可以使用参数
javascript
{
mutations: {
increment (state,payload) {
state.count += payload
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
payload 为对象类型
javascript
{
mutations: {
increment (state,payload) {
state.count += payload.count
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
对象提交
javascript
$store.commit({
type:'increment',
count:100
})
1
2
3
4
2
3
4
常量类型
mutation-type.js
javascript
export const INCREMENT = 'INCREMENT'
1
javascript
{
mutations: {
[INCREMENT] (state,payload) {
state.count += payload.count
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
javascript
$store.commit({
type:INCREMENT,
count:100
})
1
2
3
4
2
3
4
mapMutations 辅助函数
我们也可以借助于辅助函数，帮助我们快速映射到对应的方法中：
javascript
import { mapMutations, mapState } from 'vuex'
import { INCREMENT } from '../store/mutation-types'
export default {
methods: {
...mapMutations(["increment", "decrement", INCREMENT]),
...mapMutations({
add: "increment"
})
},
setup() {
const storeMutations = mapMutations(["increment", "decrement", INCREMENT])
return {
...storeMutations
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
mutation 重要原则
一条重要的原则就是要记住 mutation 必须是同步函数
- 这是因为 devtool 工具会记录 mutation 的日记；
- 每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照；
- 但是在 mutation 中执行异步操作，就无法追踪到数据的变化；
- 所以 Vuex 的重要原则中要求 mutation 必须是同步函数