Two sentences first

I've talked about the State, Getter, rotation and Action under Vuex. I don't know if you understand. Of course, if you want to master it skillfully, you need continuous practice and hands-on practice.

In fact, as long as the four carriages are mastered, there will be no problem in dealing with some small and medium-sized projects. In fact, the ultimate carriage of Module in the back is to deal with those slightly larger and more complex projects and avoid store There are too many data in it, which is difficult to manage and design. This carriage is a little abstract and not easy to control. Let's go to dissect it in detail next time.

Many of the supporting facilities in Vue have always been pursuing simplicity and perfection in the use experience, so this is a very important reason why Vue has been popular for a long time. In this case, I would like to talk about some common auxiliary functions of Vuex.

mapState

Through the previous learning, we know that the easiest way to read the state from the store instance is to return a state in the calculation attribute.

So, what happens when a component needs to get multiple states? Is this the case

export default {
  ...
  computed: {
      a () {
        return store.state.a
      },
      b () {
        return store.state.b
      },
      c () {
        return store.state.c
      },
      ...
   }
}

Of course, it's OK, but I always feel it's hard to write. It looks even worse! Since it's so easy for us to feel, can Vuex not feel it? Can we bear it?

Absolutely can't bear it, so the mapState auxiliary function has been created to deal with the pain point of this person's gnashing teeth.

// In a separately built version, the helper function is Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // Arrow function can make the code more concise
    a: state => state.a,
    b: state => state.b,
    c: state => state.c,

    // Pass string parameter 'b'
    // Equivalent to 'state = > state. B`
    bAlias: 'b',

    // In order to use 'this' to get local state
    // You must use regular functions
    cInfo (state) {
      return state.c + this.info
    }
  })
}

Through the above example, we can learn that we can directly store all the states that need to be used in mapState for unified management, and we can also take aliases, do additional operations and so on.

If the mapped calculated attribute name is the same as the state's child node name, we can also simplify it by passing a string array to mapState:

computed: mapState([
  // Map this.a to store.state.a
  'a',
  'b',
  'c'
])

Because the computed calculation property receives an object, it can be seen from the above example code that the mapState function returns an object. Now if you want to mix it with the local calculation property, you can use the syntax of ES6 to greatly simplify it:

computed: {
  localComputed () { 
    ...
  },
  // Use the object expansion operator to blend this object into external objects
  ...mapState({
    // ...
  })
}

After learning about mapState auxiliary functions, the usage of the next several auxiliary functions is almost the same. Let's continue to look at it.

mapGetters

This is basically the same as mapState. Just look at the official example and you will see:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Take an alias and use the object form. The following example means to map this.doneCount to this.$store.getters.doneTodosCount.

mapGetters({
  doneCount: 'doneTodosCount'
})

mapMutations

See the example code directly:

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      // Map 'this.increment()' to 
      // `this.$store.commit('increment')`
      'increment', 
      // `mapMutations' also supports loads:
      // Map 'this.incrementBy(amount)' to 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      // Map 'this.add()' to 
      // `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

It's not easy to use. Even the load can support it directly.

mapActions

As like as two peas in mapMutations, change your name.

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      // Map 'this.increment()' to 
      // `this.$store. dispatch('increment')`
      'increment', 
      // `mapActions' also supports loads:
      // Map 'this.incrementBy(amount)' to 
      // `this.$store. dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
      // Map 'this.add()' to 
      // `this.$store. dispatch('increment')`
      add: 'increment' 
    })
  }
}

If you want to call in the component, this.xxx will be finished.

Write at the end

It has to be said that Vuex is really diligent in using experience. Using these auxiliary functions well will greatly increase our development efficiency. Of course, if there is any problem, please leave a message and let's communicate with each other.

Reprint statement

Epilogue

The above is what brother Hu shared to you today. Please remember to like it and collect it. Pay attention to brother Hu's words, you will not lose your way in the front end of learning. Welcome to leave more messages and exchange