Vuex之理解mutation的用法

一.什么是mutation

通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离。切记:Vuex中store数据改变的唯一方法就是mutation!

二.怎么用mutations?

1.mutation结构

每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件,当触发响应类型的时候调用handker(),调用type的时候需要用到store.commit方法。

//store.js
const store = new Vuex.Store({
	state: {
		count: 1
	},
	mutations: {
 //注册时间,type:increment,handler第一个参数是state;
		increment (state) { 
			// 变更状态
			state.count++
		}
	}
})
//页面上触发
<template>
    <button @click="increment">+</button>
</template>

<script>
export default {
	methods:{
		increment(){
		//调用type,触发handler(state) 
		  	this.$store.commit('increment');
		}
	}
}
</script>

2.提交载荷(Payload)

简单的理解就是往handler(state)中传参handler(state,pryload);一般是个对象。

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

3.commit

提交可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

<template>
    <div>
		<h4>测试1:Count is {{count}}</h4>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>
<script>
export default {
	computed:{
		count(){
		    return this.$store.state.count
		}
	},
	methods:{
		increment(){
		//通过 store.commit 方法触发状态变更(mutation的方法) 
		  	this.$store.commit('increment');
		},
		decrement(){
		  	this.$store.commit('decrement');
		}
	}
}
</script>

//改成mapMutations  效果是一样
<script>
import { mapMutations } from 'vuex'
export default {
	computed:{
		count(){
		    return this.$store.state.count
		}
	},
	methods:{
		...mapMutations([
			'increment',
			'decrement'
		])
	}
}
</script>

4.使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然:

//1.vueDome
<template>
    <div>
		<h4>测试1:Count is {{count}}</h4>
        <button @click="SOME_INCREMENT">+</button>
        <button @click="SOME_DECREMENT">-</button>
    </div>
</template>
<script>
export default {
	computed:{
		count(){
		    return this.$store.state.count
		}
	},
	methods:{
		SOME_INCREMENT(){
		//通过 store.commit 方法触发状态变更(mutation的方法) 
		  	this.$store.commit('SOME_INCREMENT');
		},
		SOME_DECREMENT(){
		  	this.$store.commit('SOME_DECREMENT');
		}
	}
}
</script>


//2. mutation-types.js
//使用常量替代 Mutation 事件类型

export const SOME_MUTATION = 'SOME_INCREMENT'
export const SOME_DECREMENT = 'SOME_DECREMENT'

//3.store.js 入口文件vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 引入actions, mutations, getters
import actions from "./actions.js"
import mutations from "./mutations.js"
import getters from "./getters.js"

const state = {
	// 应用启动时, count置为0
	count:0
}
export default new Vuex.Store({
	state,
	getters,
	actions,
	mutations
})

// 4.mutations.js
import { SOME_INCREMENT } from './mutation-types'
import { SOME_DECREMENT } from './mutation-types'
export default {
	//使用ES6的箭头函数来给count增值
	SOME_INCREMENT:state => state.count ++,
	SOME_DECREMENT:state => state.count --,
}
5.Mutation 必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值