[Vuex系列] - Mutation的具体用法
更改 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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: msil 笔记
- 下一篇: vue-todolist