About Vue's 4 auxiliary functions of Vuex

1. Auxiliary functions

When a component needs to obtain multiple states, declaring all of these states as calculated properties will be somewhat repetitive and redundant. To solve this problem, we can use the mapState helper function to help us generate calculated properties, saving you a few keystrokes.

Introduce auxiliary functions into script:

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

2. Examples

1. mapState and mapGetters

Because state and getters return properties, that is, specific values, mapState and mapGetters should be placed in the computed property computed .

For example:

Now there is a property userName in the store state:

In the Home.vue component, it is obtained through mapState and displayed on the interface:

Code in computed:

  computed:{
    //Get the state in the store through the auxiliary function
    ...mapState(['userName'])
    //Equivalent to: the following regular calculated property code /* userName (){
      return this.$store.state.userName
    }*/
  }

Calling in the page:

result:

In this way, you can use a simple ...mapState(['userName']) to replace the relatively long calculated property function.
The usage of mapGetters is the same as that of mapState . You can call it in computed . Here we only take mapState as an example.

2. mapMutations and mapActions

Because mutations and actions return functions, they should be placed in the methods property of the component.

For example:

Now in store 's mutations , there is a tip function that pops up a welcome window for the current user:

The code in methods in the figure above is a shorthand for getting the mutation in the store.

  methods:{
    //Abbreviation for getting mutations in the store
    ...mapMutations(['tip'])
    //Equivalent to /* tip(){
      this.$store.commit('tip');
    }*/
  }

Call in component: Call the tip method in the created function to implement the welcome pop-up window.

The use of mapActions and mapMutations is the same, that is, they can be declared in nethods , which simplifies referencing actions and mutations in the store.

As you can see from the above example, the benefit of auxiliary functions is that they help us simplify getting the state, getter, mutation, and action in the store. Of course, the above functions can be achieved without using auxiliary functions, but when multiple states need to be used simultaneously in a component, auxiliary functions become more convenient.

This concludes this article about the four auxiliary functions of Vuex of Vue. For more relevant Vuex auxiliary function content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!