When I first contacted Vuex, I was confused by dispatch and commit. I didn’t know when I needed to use Dispacth to distribute actions and when I could commit directly. Let’s just talk about two situations that we actually used in the project today.

1. Functions and differences between Dispatch and commit

• Similarity: Both are ultimately used to commit mutation to change the value of state
• Difference:dispacthFor asynchronous operations to modify state,commitUsed for synchronous operations to modify state

What is asynchronous modification state? What is synchronous modification state

Don’t worry. Look at the case first

2. Asynchronously change state

Let’s start with a scenario where state has a default user information, userInfo, and we define a mutation and an action to modify it

const state={
 userInfo{
   name:"Tom".age:"13"}}const mutations={
 // update user information mutation
   SET_USER_INFO:(state,newUserInfo) = >{
     state.userInfo=newUserInfo
  }
}


const actions={
    // Used to submit the mutation action
    changeUserInfo({commit},data){
        commit('SET_USER_INFO',data)
    }

}
Copy the code

Get the latest userInfo in getters

const getters = {
  userInfo: state= > state.userInfo,

}
export default getters
Copy the code

Then, in the user.vue file, we update the userInfo in state asynchronously. How do we do that asynchronously? The value that we want to update is fetched by calling the back-end interface.

import  {getUserInfo} from "api"
export default {
  name: 'User'.computed: {userInfo(){
     return this.$store.getters.userInfo; // Step 3: Use getters to get the latest userInfo}},methods: {reqUserInfo(){
         // Step 1: call the back-end interface to get user information
          getUserInfo()
           .then((res) = >{
              let data=res.data.userInfo;
              (2) disptch (2) send the action to disptch and update the state value of the mutation
              this.$store.dispatch('changeUserInfo',data) 
           })
           
           .catch((err) = >{
              console.log(err)
           })
           
      }
  }	
    	
}
Copy the code

I can’t see the difference here. Don’t worry. Keep looking.

3. Synchronize state

The same code that we’re modifying synchronously, what we’re synchronizing is the value that we’re updating, not by calling the back end interface

export default {
  name: 'User'.computed: {userInfo(){
     return this.$store.state.userInfo; // Step 3: Get userInfo directly from state}},methods: {// Step 1: Generate user information
      const data={
         name:"Tom".age:"13"
      }
      
      // Step 2: update the state with the COMMIT commit mutation
      this.$store.commit('SET_USER_INFO',data)
      
    
  }	
    	
}
Copy the code

The difference between asynchronous and synchronous mutations is that asynchronous mutations must be updated by sending out action updates, while synchronous mutations can be directly committed to update the state.

Of course, synchronous updates can also be distributed with actions, as vUE officially recommends this, but asynchronous updates can only be distributed with actions

4. To sum up

• Action cannot directly change the state value
• The action must update the state by submitting mutation
• Only mutation can update state

this.$store.dispatch() : contains asynchronous operations, such as submitting data to the background, written:this.$store.dispatch(' Action method name ', value)this.$store.com MIT () : synchronous operation, written:this.$store.com MIT (' mutations method name ', value)commit: Synchronizes operation storagethis.$store.commit('changeValue', name) valuesthis.$store.state.changeValue


dispatch: Asynchronous operation storagethis.$store.dispatch('getlists', name) valuesthis.$store.getters.getlists
Copy the code