Vue front-end development auxiliary function state management detailed example

mapState
mapGetters
mapMutations
mapActions
Example
summary

mapState

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. When mapState is not used, the object state is obtained, usually in the computes property of the component being used, and is used as follows:

  //....
  computed: {
        count: function(){
            return this.$store.state.count
        }
    }
 //....

Using mapState this can be simplified to:

import { mapState } from 'vuex' //Introduce mapState object export default {
  // ...
  computed: mapState({
    // Arrow functions can make the code more concise count: state => state.count,
  })
}
Or import { mapState } from 'vuex' //Introduce mapState object export default {
  // ...
  computed: mapState({
    'count', //consistent with the state name countAlias: 'count' //countAlias is the alias used in the reference component})
}

mapGetters

The mapGetters helper function simply maps getters in the store to local computed properties, similar to state. The calculation function code is simplified to:

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
  // Use the object spread operator to mix getters into the computed object...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}

MapGetters can also use aliases.

mapMutations

Use the mapMutations helper function to map the methods in the component to store.commit calls. The simplified code is:

import { mapMutations } from 'vuex'
export default {
  //..
  methods: {
    ...mapMutations([
      'increment' // Map this.increment() to this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // Map this.add() to this.$store.commit('increment')
    })
  }
}

mapActions

Use the mapActions helper function to map component methods to store.dispatch calls. The simplified code is:

import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'incrementN' //Map this.incrementN() to this.$store.dispatch('incrementN')
    ]),
    ...mapActions({
      add: 'incrementN' //Map this.add() to this.$store.dispatch('incrementN')
    })
  }
}

Example

Following the example in Vue State Management (II), this is done using auxiliary functions. Auxiliary functions are used in the CountChange and ComputeShow components, and the rest of the code does not need to be changed.
In ComputeShow, two auxiliary functions, mapState and mapGetters, are used. The code is as follows

<template>
  <div align="center" style="background-color: bisque;">
    <p>The following is how to use computed to directly obtain the status data in stores, and refresh it synchronously when the status data changes</p>
    <h1>Use computed to receive state: {{ computedState }}</h1>
    <h1>Use computed to receive Getters: {{ computedGetters }}</h1>
  </div>
</template>
<script>
  import { mapState,mapGetters } from 'vuex' //Introduce mapState,mapGetters objects export default {
    name: 'ComputeShow',
    computed:{
    ...mapState({
      computedState:'count' //Alias: computedState
    }),
    ...mapGetters({
      computedGetters:'getChangeValue' //Alias: computedGetters
    })
    }
  }
</script>
<style>
</style>

It is recommended to add an alias when using a map, so that it is decoupled from the contents of the stores. In CountChange, two auxiliary functions, mapMutations and mapActions, are used. The code is as follows

<template>
  <div align="center">
    <input type="number" v-model="paramValue" />
    <button @click="addNum({res: parseInt(paramValue)})">+Increase</button>
    <button @click="subNum">-Decrease</button>
  </div>
</template>
<script>
  import {
    mapMutations,
    mapActions
  } from 'vuex' //Introduce mapMutations, mapActions objects export default {
    name: 'CountChange',
    data() {
      return {
        paramValue: 1,
      }
    },
    methods: {
      ...mapMutations({
        subNum: 'sub' //Add alias subNum
      }),
      ...mapActions({
        addNum: 'increment' //Map this.incrementN() to this.$store.dispatch('incrementN')
      })
    }
  }
</script>
<style>
</style>

Similarly, give aliases to methods in stores, and when parameters need to be passed, pass them to actions or mutations through aliases. For example, "addNum({res: parseInt(paramValue)})" sends an object {res: ''}

summary

The auxiliary function itself has no new meaning and is mainly used to simplify the code when using State, Getters, Mutations, and Actions.

The above is the details of the detailed example of the state management of auxiliary functions in Vue front-end development. For more information about the state management of Vue auxiliary functions, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: