The mapState helper

We can use the mapState helper to help us generate the computed state functions to save some lines and keystrokes with the following steps:

1. Create a store with multiple state properties:

// vuex-sfc/state/mapstate/src/entry.js
const store = new Vuex.Store({
  state: {
    experience: 1,
    name: 'John',
    age: 20,
    job: 'designer'
  }
})

2. Import the mapState helper from Vuex and pass the state properties as an array to the mapState method:

// vuex-sfc/state/mapstate/src/app.vue
import { mapState } from 'vuex'

export default {
  computed: mapState([
    'experience', 'name', 'age', 'job'
  ])
}

This works perfectly as long as the name of a mapped computed property is the same as a state property name. However, it is better to use it with the object spread operator so that we can mix multiple mapState helpers in the computed property:

computed: {
  ...mapState({
    // ...
  })
}

For example, you...