在Vuex使用dispatch和commit来调用mutations的区别详解
更新时间：2018年09月18日 08:51:05 作者：东边的小山
今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
main.js中
import Vuex from 'vuex'
Vue.use(vuex);
const store = new Vuex.store({
state: {
nickName: "",
cartCount: 0
},
mutations: {
updateUserInfo(state,nickName) {
state.nickName = nickName;
},
updateCartCount(state,cartCount) {
state.cartCount += cartCount;
}
},
actions: {
updateUserInfo(context) {
context.commit("updateUserInfo");
},
updateCartCount(context) {
context.commit("updateCartCount");
}
}
})
new Vue({
el: "#app",
store,
router,
template: '<App/>',
components: {App}
})
组件中：
methods: {
increment(){
this.$store.dispatch("updateUserInfo", 'nick'); //this.$store.commit("increment", 'nick');
},
decrement() {
this.$store.dispatch("updateCartCount", 1); // this.$store.commit("decrement", 1);
}
}
区别：
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
以上这篇在Vuex使用dispatch和commit来调用mutations的区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
如果你在社交媒体上停留的时间过长，那么，你所在的网站很可能正在使用无限滚动组件。这篇文章教你利用Vue3实现无限滚动组件，感兴趣的可以参考一下2022-09-09
这篇文章主要介绍了vue的自定义指令传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文主要实现给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue自定义指令的创建和使用方法,结合完整实例形式分析了vue.js创建及使用自定义指令的相关操作技巧与注意事项,需要的朋友可以参考下2018-12-12
本文主要介绍了vue封装tree组件实现搜索功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签，这篇文章主要介绍了vue组件component的注册与使用,需要的朋友可以参考下2022-08-08
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码，需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了如何在Vue项目中使用flv.js播放视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制，本文给大家介绍vue+openlayer实现地图聚合效果和撒点效果，感兴趣的朋友一起看看吧2021-09-09
这篇文章主要介绍了VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
最新评论