Differences and descriptions of...mapstate and...mapgetters in vuex

...The difference between mapstate and...mapgetters

…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 the name of the mapped computed properties is the same as the child node name of the state, we can also pass an array of strings to mapState.

computed: mapState([
  // Map as  'count'
])

The official document is as above

Because state is equivalent to data, getters is equivalent to computed attributes. I personally understand that if you only need to get one value in state, there is no need to appear as computed attributes in getters.

…mapGetters

Helper functions simply map getters in the store to local computed properties

If you want to give another name to a getter property, use the object form:

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

The official document is as above

It is equivalent to computed attributes, which is equivalent to mapping the computed attributes in vuex to the current component.

vuex mapState mapGetters usage and multiple module usage

In vuex, when a component needs to obtain multiple states, declaring these states as computed attributes will be somewhat duplicated and redundant, for example

computed: {
  count() {
    return this.$
  },
  name() {
    return this.$
  },
  age() {
    return this.$
  },
  userInfo() {
    return this.$
  }
}

To solve this problem, we can use mapState and mapGetters helper functions to help us generate computed properties, allowing you to press the key fewer times

1. mapState

1. Object writing method

// In a separate build version, the helper function isimport { mapState } from 'vuex'
export default {
  computed: mapState({
  
    // Pass function parameters    count: state => , // Arrow function can make the code more concise and map to    userCount: state => state => , // Modular writing method Arrow function can make the code more concise and map to    
    // Pass string parameters    userName: 'name', // name is equivalent to state =>, and does not support modular writing. Map as    
    // Need to use this local state, use regular function writing method    age(state) { // Map as      return  +  // Can be combined with local state    }
  })
}

2. String array writing method

In addition, there is a simpler way to write it

When the name of the map's computed attribute is the same as the child node name of the state, we can also pass a string array to mapState, similar to when the key and value key names of the object are the same { name: name } =》{ name }

computed: mapState([
  'count', // Map as  'name' // Map as])

In addition, if module modularity is used, in addition to passing objects as parameters, namespaced mapState can also use two parameters: namespace and an array of object names representing module members, like this

computed: mapState('user', ['count', 'name']) // user Module name

3. Use the expansion operator

The mapState function returns an object, which makes it impossible to mix with the current local component's computed properties.

Previously we needed to use a tool function to merge multiple objects into one so that we can pass the final object to the computed property.

Since the expansion operator has been created, the writing can be greatly simplified.

computed: {
  ...mapState([
    'count', // Map as    'name' // Map as  ]),
  // Local components compute properties  localComputed () {},
}

2. mapGetters

MapGetters helper function writes the same way

computed: {
  ...mapGetters([
    'count', // Map as    'name' // Map as  ]),
  // Local components compute properties  localComputed () {},
}

Modular writing

...mapGetters('user', ['count', 'name']) // user Module name

3. mapActions, mapMutations

MapActions and mapMutations use the same, and their function is to map the methods in actions and mutations to local component calls

For example:

Previous calls:

this.$("test", "value")
this.$("user/test", "value") // userModular， The second parameter is parameter transfer

Called after using helper functions

...mapActions([
    "test",
])
('value')

To summarize the above, it is recommended to use the expand operator + string array to pass arguments, which can greatly simplify the code, be more elegant and not redundant.

These are just personal experience. I hope you can give me a reference and I hope you can support me more.