What are the differences between mapState and mapGetters of vuex, and what are the scenarios used by both?

what are the differences between mapState and mapGetters of vuex, and what are the scenarios used by both

Apr.02,2021

there is an introduction on the official website

mapState helper function

when a component needs to acquire multiple states, declaring these states as computational properties can be repetitive and redundant. To solve this problem, we can use the mapState helper function to help us generate calculation properties so that you can press the key

a few times less.
//  Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 
    count: state => state.count,

    //  'count'  `state => state.count`
    countAlias: 'count',

    //  `this` 
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

mapGetters helper function

The

mapGetters helper function simply maps getter in store to the local evaluation attribute:

import { mapGetters } from 'vuex'

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