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;
}
}
}