vuex mutation action同级调用方式
更新时间：2022年03月28日 12:02:48 作者：zhooson
这篇文章主要介绍了vuex mutation action同级调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
mutation action同级调用
mutatiion同级调用：this.commitaction同级调用：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')
}
}
mutation和action区别
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。Action：可以异步，但不能直接操作State。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3中reactive不能直接赋值的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本篇文章主要介绍了vue-scroller记录滚动位置的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了vue+Echart实现立体柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了Vue中this.$nextTick()的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
路由是可以传递参数的，一般使用query进行传参，有两种方式，本温酒通过代码示例给大家介绍这两种传递方式，感兴趣的小伙伴可以参考阅读2023-06-06
毫无疑问,组件通讯是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果,所以,学习组件通讯技术是非常有必要的,本文将一次解决Vue3中组件通讯的全部方式,总有你想要的那一种,需要的朋友可以参考下2024-09-09
本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
vue element-ui el-cascader级联选择器数据回显的两种实现方法
这篇文章主要介绍了vue element-ui el-cascader级联选择器数据回显的两种实现方法，具有很好的参考价值，希望对大家有所帮助。2023-07-07
Vue3 echarts组件化及使用hook进行resize方式
这篇文章主要介绍了Vue3 echarts组件化及使用hook进行resize方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论