Vuex中this.$store.commit()和this.$store.dispatch()区别是什么
Vuex中this.$store.commit()和this.$store.dispatch()区别是什么
这篇文章主要讲解了“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”吧！
this.$store.commit()和this.$store.dispatch()的区别
两个方法其实很相似，关键在于一个是同步，一个是异步
commit: 同步操作
this.$store.commit('方法名',值)//存储this.$store.state.'方法名'//取值
dispatch: 异步操作
this.$store.dispatch('方法名',值)//存储this.$store.getters.'方法名'//取值
当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了,其他使用commit即可.
其他了解
commit=>mutations, 用来触发同步操作的方法.dispatch=>actions, 用来触发异步操作的方法.
在store中注册了mutation和action
在组件中用dispatch调用action,用commit调用mutation
Vuex应用实例this.$store.commit()触发
新建文件夹store,store下
action.js
constactions={}exportdefaultactions;
getter.js
constgetters={}exportdefaultgetters;
mutation-types.js
exportconstpublicSetEvent='publicSetEvent';
mutations.js
import{publicSetEvent}from'./mutation-types';constmutations={[publicSetEvent]:(state,json)=>{ //初始化默认，避免跳转路由时的公用部分显示的相互影响state.publicSet={headTitle:true,headNav:false,sTitle:'头部标题'}//是否显示头部titlestate.publicSet.headTitle=json.headTitle||state.publicSet.headTitle;//是否显示头部tabbar切换state.publicSet.headNav=json.headNav||state.publicSet.headNav;//头部显示的标题文字state.publicSet.sTitle=json.sTitle||state.publicSet.sTitle;//tabbar的标题文字及待办badge数字state.publicSet.navList=json.navList||state.publicSet.navList;}}exportdefaultmutations;
index.js
importVuefrom'vue'importVuexfrom'vuex'importmutationsfrom'./mutations';importgettersfrom'./getters';importactionsfrom'./actions';Vue.use(Vuex);conststate={publicSet:{//设置公共头headTitle:true,headNav:false,sTitle:'头部标题'}}conststore=newVuex.Store({state,getters,mutations,actions});exportdefaultstore;
头部公共组件components文件夹下
v-header.vue
<template><divclass="v-header"><vTitlev-if="publicSet.headTitle":stitle="publicSet.sTitle"></vTitle></div></template>
<script>importvTitlefrom'./v-title';import{mapState}from'vuex';exportdefault{name:'v-header',components:{vTitle},data(){return{}},computed:{...mapState(['publicSet'])}}</script>
v-title.vue
<template><divclass="v-title"><XHeader:left-options="{backText:''}":title="stitle"></XHeader></div></template>
<script>import{XHeader}from'vux'exportdefault{name:'v-title',props:['stitle'],components:{XHeader},data(){return{}},methods:{}}</script><stylelang="less"></style>
App.vue
<template><divid="app"><vHeader></vHeader><router-view/></div></template>
<script>importvHeaderfrom'@/components/header/v-header'exportdefault{name:'app',components:{vHeader}}</script>
main.js
importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importVuexfrom'vuex'importstorefrom'./store'Vue.use(Vuex)Vue.config.productionTip=falsenewVue({el:'#app',router,store,components:{App},template:'<App/>'})
页面调用index.vue
<template><divclass="index"></div></template>
<script>exportdefault{name:'index',data(){return{}},created(){},beforeRouteEnter(to,from,next){letoption={headTitle:true, sTitle:'我是新标题'}console.log(option);next(vm=>{vm.$store.commit('publicSetEvent',option);})},methods:{}}</script><stylelang="less"></style>
运行进去index页面就可以看到公共头了
感谢各位的阅读，以上就是“Vuex中this.$store.commit()和this.$store.dispatch()区别是什么”的内容了，经过本文的学习后，相信大家对Vuex中this.$store.commit()和this.$store.dispatch()区别是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
