0
点赞
收藏
分享

微信扫一扫

Vuex之Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

在vue中,我们要修改data中的值,一般会这么做。

this.count = 2

如果我们要修改vuex的store中的状态值,我们就不能简单的通过赋值的方式来做了,如果你这样做,控制台便会报错。

this.$store.state.count = 2 //控制台打印错误

vuex提供了mutation来追踪你对state的值的操作。

Vuex 中的 mutation 非常类似于vue中的$emit事件,每个 mutation 都有一个字符串的事件类型 (type) ,相当于当前事件的唯一标识,以便于你用commit触发它。

每个mutation都有一个回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。同时他也支持额外参数的传入,额外参数的术语叫“载荷”。

示例如下:

//state.js
let state = {
count: 1,
name: 'lyh',
}
export default state
//mutation.js
// 第一个参数默认接收state对象
const increment = (state) => {
state.count++
}
const decrement = (state) => {
state.count--
}
//第二个参数接收'载荷'
const add = (state, n) => {
state.count += n
}
const fn = (state, json) => {
state.name = json.first + json.second + state.name
}
export {increment, decrement, add, fn}
<template>
<div>
<div>
<button @click="decrement">-</button>
<span>{{count}}</span>
<button @click="increment">+</button>
</div>
<div style="margin-top:20px;">
<button @click="add(1)">+1</button>
<button @click="add(2)">+2</button>
</div>
<button style="margin-top:20px" @click = "changeName('my ','name is ')">{{name}}</button>
</div>
</template>

<script>
export default {
computed: {
count () {
return this.$store.state.count
},
name () {
return this.$store.state.name
}
},
methods: {
decrement () {
this.$store.commit('decrement')
},
increment () {
this.$store.commit('increment')
},
add (n) {
// 你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)
this.$store.commit('add', n)
},
changeName (first, second) {
// this.$store.commit('fn', {
// 'first': first,
// 'second': second
// })
// 上面的写法等同于下面,对象风格的提交方式,个人觉得上面的写法更清晰
this.$store.commit({
'type': 'fn',
'first': first,
'second': second
})
}
}
}
</script>

mutation也有辅助函数,用法示例如下:

<template>
<div>
<div>
<button @click="decrement">-</button>
<span>{{count}}</span>
<button @click="increment">+</button>
</div>
<div style="margin-top:20px;">
<button @click="add(1)">+1</button>
<button @click="add(2)">+2</button>
</div>
<button style="margin-top:20px" @click = "changeName({'first':'my ',second:'name is '})">{{name}}</button>
</div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
computed: {
count () {
return this.$store.state.count
},
name () {
return this.$store.state.name
}
},
// 辅助函数写法
methods: {
...mapMutations({
decrement: 'decrement',
increment: 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
add: 'add',
changeName: 'fn' // 将 `this.changeName(json)` 映射为 `this.$store.commit('fn', json)`
})
}
}
</script>

Mutation在使用时请不要涉及任何异步操作,如果你想改变count的值,你通过mutation中的两个异步事件,都改变了这个状态值,你怎么知道什么时候回调和哪个先回调呢。

因此mutation用于管理同步事件,如果有异步操作,请用action。


举报

相关推荐

0 条评论