Summary of how to use dispatch in front-end vuex

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(() => {
  this.$({ path: '/' }); //Redirect to the homepage after login is successful}).catch(err => {
  this.$(err); //The login failed prompt error});

action:

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

Attachment: The role and difference between dispatch and commit

Similarities: Both are ultimately used to submit mutation to change the value of state

Differences: dispatch is used to modify state asynchronous operations, commit is used to modify state synchronous operations

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 how to use dispatch in front-end vuex. For more related content on using dispatch in vuex, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!