目录mutation action同级调用mutation和action区别1、流程顺序2、角色定位3、限制mutation action同级调用 mutatiion同级调用:thi
mutatiion
同级调用:this.commit
action
同级调用:this.dispatch
// 同步
const mutations = {
add(state, payload) {
state.countB += 10
},
plus(state, payload) {
this.commit('add')
}
}
// 异步(定时器等)
const actions = {
addCountBAction({ state, commit }, payload) {
commit('add', payload)
},
plusCountBToAAction({ state, commit, dispatch, getters, rootState, rootGetters }, payload) {
// https://Vuex.vuejs.org/zh/api/#actions
setTimeout(() => {
dispatch('addCountBAction')
}, 2000);
// 或者 thiis.dispatch('addCountBAction')
}
}
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
基于流程顺序,二者扮演不同的角色。
Mutation
:专注于修改State,理论上是修改State的唯一途径。Action
:业务代码、异步请求。角色不同,二者有不同的限制。
Mutation
:必须同步执行。Action
:可以异步,但不能直接操作State。以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vuex mutation action同级调用方式
本文链接: https://www.lsjlt.com/news/144137.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0