在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的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
如何在Vue中实现Svelte的Defer Transition
这篇文章主要介绍了如何在Vue中实现Svelte的Defer Transition,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下2021-04-04vue中el-autocomplete与el-select的异同
本文主要介绍了vue中el-autocomplete与el-select的异同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-05-05
最新评论