Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Building an E-Commerce Store - Browsing Products Chapter 10

In our CategoryPage component, we can now call on the new getter with

this.$store.getters.categoriesExist(). To save having this.$store.getters

repeated twice in this function, we can map the getters to be locally accessed. This allows us
to call this.categoriesExist() as a more readable function name.

At the beginning of the computed object, add a new function

titled ...Vuex.mapGetters(). This function accepts an array or an object as a parameter

and the three dots at the beginning ensure the contents are expanded to be merged with the

computed object.

Pass in an array containing the names of the two getters:

computed: {

...Vuex.mapGetters([

'categoryProducts',

'categoriesExist'

]),

category() {

...

}

}

This now means we have this.categoriesExist and this.categoryProducts at our

disposal. Update the category function to use these new functions:

computed: {

...Vuex.mapGetters([

'categoriesExist',

'categoryProducts'

]),

category() {

if(this.categoriesExist) {

let category = this.categoryProducts(this.slug);

if(!category) {

this.categoryNotFound = true;

}

return category;

}

}

}