这篇文章主要介绍了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
const actions = {} export default actions;getter.js
const getters = {} export default getters;mutation-types.js
export const publicSetEvent = 'publicSetEvent';
mutations.js
import {publicSetEvent} from './mutation-types'; const mutations = { [publicSetEvent]: (state, json) => { // 初始化默认，避免跳转路由时的公用部分显示的相互影响 state.publicSet = {headTitle: true,headNav: false,sTitle: '头部标题'} // 是否显示头部title state.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; } } export default mutations;index.js
import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations'; import getters from './getters'; import actions from './actions'; Vue.use(Vuex); const state = { publicSet: {//设置公共头 headTitle: true, headNav: false, sTitle: '头部标题' } } const store = new Vuex.Store({ state, getters, mutations, actions }); export default store;头部公共组件components文件夹下
v-header.vue
v-title.vue
App.vue
main.js
import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' import store from './store' Vue.use(Vuex) Vue.config.productionTip = false new Vue({ el: '#app', router, store, components: { App }, template: '页面调用index.vue
运行进去index页面就可以看到公共头了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是Vuex中this.$store.commit()和this.$store.dispatch()区别说明的详细内容，更多请关注0133技术站其它相关文章！
