Analysis of the difference and usage of commit and dispatch in Vue (Latest)

Analysis on the difference between commit and dispatch in Vue and its usage

In Vue,commitanddispatchare two methods used to trigger mutations and actions in the Vuex store.

the difference

commit: Used to trigger mutations, that is, to directly modify state synchronization operation. passcommitMethods can call mutations in the store and can only be executed synchronously. How to use it is as follows:

this.$('mutationName', payload);

dispatch: Used to trigger actions, that is, perform asynchronous operations or complex logical processing. passdispatchMethods can call actions in the store and can be asynchronous. How to use it is as follows:

this.$('actionName', payload);

Analysis:

When you need to modify state, you should use itcommitTo call mutations。
When asynchronous operations are required, such as sending network requests, and having dependencies between multiple mutations, it should be useddispatchTo call actions。

Summarize

commitUsed for synchronization operations, mainly used to modify state;dispatchIt is used for asynchronous operations, mainly used to perform a series of operations, including triggering multiple mutations or some other asynchronous operations.

Asynchronous operation: it will be executed after pulling information from the cloud, and placed in actions

Synchronous operation: put in mutations

Extension: Use of dispatch in front-end vuex

Tip: After the article is finished, the directory can be automatically generated. How to generate it can refer to the help document on the right

Preface

Usage of dispatch in Vuex!

1. What are vuex and this.$?

Vuex: Vuex is a state management model developed specifically for applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules.
this.$: this.$ is a method used to trigger an action in vuex.

2. How to use

#Basic Usage
this.$('actionName');

#Actual case (login)

this.$('LoginByUsername', ).then(() =&gt; {
  this.$({ path: '/' }); //Redirect to the homepage after login is successful}).catch(err =&gt; {
  this.$(err); //The login failed prompt error});

action:

LoginByUsername({ commit }, userInfo) {
  const username = ()
  return new Promise((resolve, reject) =&gt; {
    loginByUsername(username, ).then(response =&gt; {
      const data = 
      ('Token', ) //Storage the token in the cookie after login successfully      commit('SET_TOKEN', )
      resolve()
    }).catch(error =&gt; {
      reject(error)
    });
  });
}

Summarize

Vuex is a state management model specially developed for applications.
This.$ is a method used to trigger an action in vuex.

This is the article about the difference between commit and dispatch in Vue and its usage analysis. For more related contents of commit and dispatch in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!