The difference between dispatch and Commit in Vuex

official explanation

Commit

commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object)

Submit the mutation. options can have root: true, which allows submitting root mutations in namespace modules.

dispatch

dispatch(type: string, payload?: any, options?: Object): Promise<any>
dispatch(action: Object, options?: Object): Promise<any>

Distribute actions. options can have root: true, which allows root actions to be distributed in namespaced modules. Returns a Promise that resolves to all fired action handlers.

understand

this.$store.dispatchDistribute actions-> Invoke mutations> Changestates

Similarities and differences between dispatch() and commit() in Vuex

• Same point

  can be modified state, and will also trigger an update of the view

• difference

  commitmutationThe method in vuex is called , which has synchronization restrictions; while the method indispatch vuex called by , can call the function in , and can also perform asynchronous operationsactionactionmutation

commit: synchronous operation

// 存储
this.$store.commit('chgval',name);
// 取值
this.$store.state.chgval;

dispatch: asynchronous operation

// 存储
this.$store.dispatch('listdata',name);
// 取值
this.$store.getters.listdata;