SoFunction
Updated on 2025-03-09

Detailed explanation example of state management of auxiliary function for vue front-end development

mapState

When a component needs to obtain multiple states, declaring these states as computed properties will be somewhat duplicated and redundant. To solve this problem, we can use the mapState helper function to help us generate computed properties. When mapState is not used, the object state is usually placed in the components property of the component, and the usage method is:

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

Using mapState can be simplified to:

import { mapState } from 'vuex'  //Introduce mapState objectexport default {
  // ...
  computed: mapState({
    // Arrow function can make the code simpler    count: state => ,
  })
}
or
import { mapState } from 'vuex'  //Introduce mapState objectexport default {
  // ...
  computed: mapState({
    'count', //The same as the state name     countAlias：'count' //countAlias ​​is an alias used in the reference component  })
}

mapGetters

The mapGetters helper function simply maps getters in the store to local computed properties, similar to state. Simplified by the calculation function code to;

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

MapGetters can also use alias.

mapMutations

Use the mapMutations helper function to map methods in the component to calls, and the simplified code is:

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

mapActions

Use the mapActions helper function to map the methods of the component into calls, and the simplified code is:

import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'incrementN' //Mapping () is this.$('incrementN')    ]),
    ...mapActions({
      add: 'incrementN' //Mapping () is this.$('incrementN')    })
  }
}

Example

Follow the example in vue state management (II) and complete it using helper functions. Helper functions are used in the CountChange and ComputeShow components, and the rest of the code does not need to be changed.
In ComputeShow, mapState and mapGetters two helper functions are used. The code is as follows

<template>
  <div align="center" style="background-color: bisque;">
    <p>The following is usedcomputedGet it directlystoresStatus data in，When the status data changes，Synchronous refresh</p>
    <h1>usecomputedtake over state:{{ computedState }}</h1>
    <h1>usecomputedtake overGetters:{{ 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 map, so that it will be decoupled from the content in stores. In CountChange, 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">-reduce</button>
  </div>
</template>
<script>
  import {
    mapMutations,
    mapActions
  } from 'vuex' //Introduce mapMutations and mapActions objects  export default {
    name: 'CountChange',
    data() {
      return {
        paramValue: 1,
      }
    },
    methods: {
      ...mapMutations({
        subNum: 'sub'  //Add alias subNum      }),
      ...mapActions({
        addNum: 'increment' //Mapping () is this.$('incrementN')      })
    }
  }
</script>
<style>
</style>

Also create alias for the methods in stores. When you need to pass parameters, pass the parameters to actions or mutations through the alias. For example: "addNum({res: parseInt(paramValue)})" is transmitted in "addNum({res: parseInt(paramValue)})"

summary

The helper 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 detailed explanation of the state management of the state management of the vue front-end development of the vue helper function. For more information about the state management of the vue helper function, please pay attention to my other related articles!