更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。

接下來我們還是用上一篇文章在state中存放的count為例，來看利用Mutation修改state的count屬性。

利用commit來觸發(fā)mutation函數(shù)

在mutation函數(shù)中添加count的add函數(shù)

const mutations = {addNum (state) {state.num++},add (state) {state.count += 2} } export default mutations

在組件中使用mutation進(jìn)行實(shí)現(xiàn)疊加器

<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div> </template><script> import store from '@/store/store' export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add')}} } </script>

Mutation的載荷（payload）

你可以向store.commit傳入額外的參數(shù)，即mutation的載荷（payload）：我們還是以上面累加器的例子來實(shí)現(xiàn)mutation函數(shù)的傳參，來動(dòng)態(tài)定義累加的數(shù)量。

在mutation.js中修改add方法

const mutations = {addNum (state) {state.num++},add (state, n) {state.count += n} }export default mutations

在組件中store.commit如何傳參

<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div> </template><script> import store from '@/store/store' export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add', 5)}} } </script>

?在mutation傳參（載荷）可以傳遞一個(gè)參數(shù)也可以傳遞一個(gè)對(duì)象。讓我們修改下上面的例子

mutation.js文件中修改如下

const mutations = {addNum (state) {state.num++},add (state, payload) {state.count += payload.amount} }export default mutations

組件中修改如下

<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div> </template><script> import store from '@/store/store' export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add', { amount: 10 })}} } </script>

在store.commit中可以進(jìn)行對(duì)象風(fēng)格的提交

依據(jù)上面的例子，我們將組件中內(nèi)容修改如下

<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div> </template><script> import store from '@/store/store' export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit({type: 'add',amount: 8})}} } </script>

使用常量替代 Mutation 事件類型

使用常量替代mutation事件類型在各種Flux實(shí)現(xiàn)中是很常見的模式。這樣可以使 linter之類的工具發(fā)揮作用，同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè)項(xiàng)目包含的mutation一目了然。這在在需要多人協(xié)作的大型項(xiàng)目中，這會(huì)很有幫助。

我們?cè)趕tore中新建mutation-types.js文件，文件內(nèi)容如下

export const SOME_MUTATION = 'SOME_MUTATION'

?在mutation.js文件內(nèi)容如下

import { ADD } from './mutation-types' const mutations = {addNum (state) {state.num++},[ADD] (state) {state.count++} }export default mutations

在組件中內(nèi)容和之前一致

<template><div class="mutation"><p>{{ count }}</p><button @click="addCount">+ADD</button></div> </template><script> import store from '@/store/store' export default {computed: {count () {return this.$store.state.count}},methods: {addCount () {store.commit('add')}} } </script>

在組件中使用this.$store全局屬性來觸發(fā)mutation函數(shù)

<template><div class="mutation"><p>{{ count }}</p><button @click="add">+ADD</button></div> </template><script> export default {computed: {count () {return this.$store.state.count}},methods: {add () {this.$store.commit('add')}} } </script>

在組件中使用mapMutations輔助函數(shù)

<template><div class="mutation"><p>{{ count }}</p><button @click="add">+ADD</button></div> </template><script> import { mapMutations } from 'vuex' export default {computed: {count () {return this.$store.state.count}},methods: {...mapMutations(['add'])} } </script>

Mutation一條重要的原則就是要記住 mutation 必須是同步函數(shù)

?

轉(zhuǎn)載于:https://www.cnblogs.com/wangshucheng/p/vux-003.html

總結(jié)

以上是生活随笔為你收集整理的[Vuex系列] - Mutation的具体用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。