How to use Vuex's auxiliary functions

mapState
mapGetters
mapMutations
mapActios
Multiple modules

mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed:{
     ...mapState({
         // Arrow functions can make the code more concise count: state => state.count,
         // Passing the string parameter 'count' is equivalent to `state => state.count`
         countAlias: 'count',

         // In order to be able to use `this` to get the local state, you must use the regular function countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}

When the defined attribute name is the same as the name in the state, you can pass in an array

//Define state
const state = {
    count:1,
}

//Use the auxiliary function computed in the component:{
    ...mapState(['count'])
}

mapGetters

computed:{
    ...mapGetters({
      // Map `this.doneCount` to `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
}

When the property name is the same as defined in getters, you can pass in an array

computed:{
  computed: {
  // Use the object spread operator to mix getters into the computed object...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Summarize:

Both mapState and mapGetters use computed for mapping
After mapping in the component, use it through this. mapping attribute name

mapMutations

methods:{
    ...mapMutations({
        add: 'increment' // Map `this.add()` to `this.$store.commit('increment')`
    })
}

When the property name is the same as defined in mapMutatios, you can pass in an array

methods:{
    ...mapMutations([
        'increment', // Map `this.increment()` to `this.$store.commit('increment')`

        // `mapMutations` also supports payloads:
        'incrementBy' // Maps `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
    ]),
}

mapActios

mathods:{
    ...mapActions({
        add: 'increment' // Map `this.add()` to `this.$store.dispatch('increment')`
    })
}

When the attribute name is the same as defined in mapActios, an array can be passed in

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

Summarize

Both mapMutations and mapActios are mapped in methods
After mapping, it becomes a method

Multiple modules

When not using auxiliary functions,

this.$store.commit('app/addCount')

Use the helper function, the first parameter of the helper function is the path to the given namespace

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

Or use the createNamespacedHelpers function to create a namespace-based helper function

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') // given a path // use the same method as before export default {
  computed: {
    // Look in `some/nested/module`...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // Look in `some/nested/module`...mapActions([
      'foo',
      'bar'
    ])
  }
}

The above is the detailed content on how to use the auxiliary functions of vuex. For more information about the auxiliary functions of vuex, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Vue parent component calls child component function implementation
Graphical explanation of the function call of proto file in Vue
Detailed explanation of the basic usage of the auxiliary function mapGetters in vuex
Detailed explanation of props and context parameters of SetUp function in Vue3
In-depth study of vue2.x--Explanation of the h function

<<: Detailed explanation of MySQL combined index and leftmost matching principle

>>: Learn to deploy microservices with docker in ten minutes