Vuex学习总结 - Mutations（5）
4.Vuex核心概念
4.3 Mutations
改变Vuex实例中的状态的唯一方法是提交mutation。
在Vuex学习总结（2）的Vuex入门这里已经演示了如何提交mutation。
在提交mutation时可以带参数。
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1,
},
mutations: {
incrementBy(state, n) {
state.count += n
},
},
})
<template>
<div>
<button @click="incrementBy">加三</button> {{count}}
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: "Counter",
computed: {
...mapState(['count']),
},
methods: {
incrementBy() {
this.$store.commit('incrementBy', 3)
}
}
}
</script>
提交mutation时的参数可以是一个对象。
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1,
},
mutations: {
incrementBy(state, payload) {
state.count += payload.amount
},
},
})
<template>
<div>
<button @click="incrementBy">加三</button> {{count}}
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: "Counter",
computed: {
...mapState(['count']),
},
methods: {
incrementBy() {
this.$store.commit('incrementBy', {amount: 3})
}
}
}
</script>
提交mutation还可以像下面这样。
this.$store.commit({type: 'incrementBy', amount: 10})
使用mapMutations。
<template>
<div>
<button @click="increment">加一</button> {{count}}
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
name: "Counter",
computed: {
...mapState(['count']),
},
methods: mapMutations(['increment'])
}
</script>
往Vuex实例的state属性添加数据。
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
people: {
name: '张三',
},
},
})
<template>
<div class="home">
{{this.$store.state.people}} <button @click="addAge">添加年龄</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
addAge() {
this.$store.state.people = {...this.$store.state.people, age: 20}
},
},
}
</script>
将本地方法与mapMutations合并的方法。
<template>
<div>
<button @click="increment">加一</button> {{count}}
<button @click="add">加一</button> {{count}}
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
name: "Counter",
computed: {
...mapState(['count']),
},
methods: {
...mapMutations(['increment']),
...mapMutations({
add: 'increment'
})
}
}
</script>
在Vuex中，mutations是同步事务，因为当两个异步回调同时改变一个状态时，不知道那个异步回调先执行完，这样就无法跟踪状态的变化。就像在JavaScript中，先后写两个Ajax，你不知道哪个Ajax先执行完。
参考：
