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

(singke) #1
Building an E-Commerce Store - Browsing Products Chapter 10

As we are abstracting all of the logic out, pass in the slug variable as the parameter of the


second function:


categoryProducts: (state) => (slug) => {

}

As we are transferring the logic for selecting and retrieving the categories and products into


the store, it makes sense to store the HomePage category content in the state itself:


state: {
products: {},
categories: {},

categoryHome: {
title: 'Welcome to the Shop',
handle: 'home',
products: [
'adjustable-stem',
'fizik-saddle-pak',
'kenda-tube',
'colorful-fixie-lima',
'oury-grip-set',
'pure-fix-pedals-with-cages'
]
}
}

Move category-selecting logic from the category computed function in the CategoryPage


component into the getter. Update the slug and categoryHome variables to use the


content from the relevant places:


categoryProducts: (state) => (slug) => {
if(Object.keys(state.categories).length) {
let category = false;
if(slug) {
category = this.$store.state.categories[this.slug];
} else {
category = state.categoryHome;
}
}
}
Free download pdf