本篇内容介绍了“vuex mutation action同级调用方式是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
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。
“vuex mutation action同级调用方式是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。