Vuex之理解Mutations的用法实例
1.什么是mutations？
上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据)，Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！
通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。
2.怎么用mutations？
mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。
conststore=newVuex.Store({
state:{
count:1
},
mutations:{
increment(state){//注册时间，type:increment，handler第一个参数是state；
//变更状态
state.count++}}})
store.commit('increment')//调用type，触发handler（state）
载荷（payload）:简单的理解就是往handler(stage)中传参handler(stage,pryload)；一般是个对象。
mutations:{
increment(state,n){
state.count+=n}}
store.commit('increment',10)
mutation-types：将常量放在单独的文件中，方便协作开发。
//mutation-types.js
exportconstSOME_MUTATION='SOME_MUTATION'
//store.js
importVuexfrom'vuex'
import{SOME_MUTATION}from'./mutation-types'
conststore=newVuex.Store({
state:{...},
mutations:{
//我们可以使用ES2015风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION](state){
//mutatestate
}
}
})
commit：提交可以在组件中使用this.$store.commit('xxx')提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用（需要在根节点注入store）。
import{mapMutations}from'vuex'
exportdefault{
methods:{
...mapMutations([
'increment'//映射this.increment()为
this.$store.commit('increment')]),
...mapMutations({
add:'increment'//映射this.add()为
this.$store.commit('increment')
})}}
3.源码分析
registerMutation:初始化mutation
functionregisterMutation(store,type,handler,path=[]){
//4个参数，store是Store实例，type为mutation的type，handler，path为当前模块路径
constentry=store._mutations[type]||(store._mutations[type]=
[])//通过type拿到对应的mutation对象数组
entry.push(functionwrappedMutationHandler(payload){
//将mutation包装成函数push到数组中，同时添加载荷payload参数
handler(getNestedState(store.state,path),payload)
//通过getNestedState()得到当前的state，同时添加载荷payload参数
})
}
commit:调用mutation
commit(type,payload,options){
//3个参数，type是mutation类型，payload载荷，options配置
if(isObject(type)&&type.type){
//当type为object类型，
options=payload
payload=type
type=type.type
}
constmutation={type,payload}
constentry=this._mutations[type]
//通过type查找对应的mutation
if(!entry){
//找不到报错
console.error(`[vuex]unknownmutationtype:${type}`)
return
}
this._withCommit(()=>{
entry.forEach(functioncommitIterator(handler){
//遍历type对应的mutation对象数组，执行handle（payload）方法
//也就是开始执行wrappedMutationHandler(handler)
handler(payload)
})
})
if(!options||!options.silent){
this._subscribers.forEach(sub=>sub(mutation,this.state))
//把mutation和根state作为参数传入
}
}
subscribers:订阅store的mutation
subscribe(fn){
constsubs=this._subscribers
if(subs.indexOf(fn)<0){
subs.push(fn)
}
return()=>{
consti=subs.indexOf(fn)
if(i>-1){
subs.splice(i,1)
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。