• This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

First of all to sincerely thank you for always supporting me to fans, also thank the nuggets can give me such a sharing platform, writing during the harvest of my small fans, also felt happy, friends here we ended, where don’t understand or bad places welcome correct oh, congratulations to also see now friend, at the end of the article blogger is prepared to reward! May you return as a teenager after thousands of sails

Vuex_Action

Action is similar to mutation, except that:

  • The Action commits mutation rather than a direct state change.
  • Actions can contain any asynchronous operation

The Action function accepts a context object with the same methods and properties as the store instance, so you can submit a mutation by calling context.mit. Or get state and getters via context.state and context.getters:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')}}})Copy the code

Distribution of the Action

store.dispatch('increment')
Copy the code

This is similar to mutation, but it is possible to perform asynchronous operations in action, but not mutation!!

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() = > {
      commit('increment')},1000)}}Copy the code

Combination of the Action

Actions are usually asynchronous, so how do you know when an Action ends?

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) = > {
      setTimeout(() = > {
        commit('someMutation')
        resolve()
      }, 1000)}}}Copy the code
store.dispatch('actionA').then(() = > {
   // ... 
})
Copy the code

​

Vuex management mode

​

Vuex_Module

Because of the use of a single state tree, all the states of an application are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated.

To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, and getter.

modules: {
  a,
  b
}
Copy the code
  • For the state: [this. store.state.moduleName.xxx](<>”this.store.state.moduleName.xxx](<> “this.store.state.moduleName.xxx](<>”this.store.state.moduleName.xxx”)
  • Getters. XXX](<>”this.store.getters. XXX “) (<>”this.store.getters. XXX “)
  • Submit mutation: this. Codestore.com MIT (‘ XXX ‘);
  • Dispatch action: this.$store.dispatch(‘ XXX ‘);
  • Getters, mutations, and Actions can be obtained through mapXXX, but state cannot be obtained. If you want to obtain state through this method, you need to add namespace.

The namespace

You can make it a namespaced module by adding Namespaced: True.

  • For the state: [this. store.state.moduleName.xxx](<>”this.store.state.moduleName.xxx](<> “this.store.state.moduleName.xxx](<>”this.store.state.moduleName.xxx”)
  • Get getter: this.$store.[‘moduleName/getters’]
  • Submit mutation: this. Codestore.com MIT (‘moduleName/ XXX ‘);
  • This.$store.dispatch(‘moduleName/ XXX ‘);
  • State, getters, mutations, actions can be obtained through mapXXX.

Local state of a module

For mutation and getters inside a module, the first argument received is the module’s local state object.

Similarly, for actions within the module, the local state is exposed through context.state and the rootState is context.rootstate.

For getters inside the module, the root node state is exposed as the third parameter.

Finally, reward those who persist

If it is helpful to you, I hope I can give 👍 comment collection three even!

The front end is not the only thing an honest man can do. I hear that’s what friends like, huh?

Those who want to make friends with bloggers can check out the homepage: Frontend Honest People for information