Just like the mapState helper, we can use the mapGetters helper to map the store getters in the computed properties. Let's see how we can use it with the following steps:
- Import the mapGetters helper from Vuex and pass the getters as an array to the mapGetters method with the object spread operator so that we can mix multiple mapGetters helpers in the computed property:
// vuex-sfc/getters/mapgetters/src/app.vue
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'countCitrus'
]),
...mapGetters({
totalCitrus: 'countCitrus'
})
}
}
In the preceding code, we created an alias for the countCitrus getter by passing the string value to the totalCitrus key. Note that with the object spread operator, we also can mix other vanilla methods in the computed property. So, let's add a vanilla getOrange getter method to the computed option on top of these mapGetters ...