Vuex中this.$store.commit()和this.$store.dispatch()区别说明

目录

• this.$store.commit()和this.$store.dispatch()的区别
• commit: 同步操作
• dispatch: 异步操作
• 其他了解
• Vuex应用实例this.$store.commit()触发
• 新建文件夹store,store下
• 头部公共组件components文件夹下

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页面就可以看到公共头了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。