在Vuex使用dispatch和commit来调用mutations的区别详解 - 网站

在Vuex使用dispatch和commit来调用mutations的区别详解

分类:Vue.js 教程 · 发布时间:2021-10-01 08:48 · 阅读:2506

今天小编就为大家分享一篇在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: '',   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

相关文章

vue加载视频流,实现直播功能的过程

这篇文章主要介绍了vue加载视频流,实现直播功能的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue2项目升级到Vue3的详细教程

看到好多开源项目都升级了vue3,下面这篇文章主要给大家介绍了关于Vue2项目升级到Vue3的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

解决v-model双向绑定失效的问题

这篇文章主要介绍了解决v-model双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue面试必备之防抖和节流的使用

在这篇文章中,大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者(watchers)以及事件处理程序,文中的示例代码简洁易懂,希望对大家有所帮助

element中async-validator异步请求验证使用

本文主要介绍了element中async-validator异步请求验证使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

返回分类 返回首页