Building an E-Commerce Store - Browsing Products Chapter 10With that, we have our category products listed out for each category.
Code optimization
With our CategoryPage component complete, we can see a lot of similarities between that
and the home page – the only difference being the home page has a fixed product array. To
save repetition, we can combine these two components – meaning we only have to ever
update one if we need to.
We can address the fixed array issue by displaying it when we identify that we are on the
home page. The way of doing that is to check if the slug prop has a value. If not, we can
assume we are on the home page.
First, update the Home route to point to the CategoryPage component and enable props.
When using named views, you have to enable props for each of the views. Update the
props value to be an object with each of the named views, enabling the props for each:
{
path: '/',
name: 'Home',
components: {
default: CategoryPage,
sidebar: ListCategories
},
props: {
default: true,
sidebar: true
}
}Next, create a new variable in the data function of the CategoryPage, titled
categoryHome. This is going to be an object that follows the same structure as the category
objects, containing a products array, title, and handle. Although the handle won't be used,
it is good practice to follow conventions:
data() {
return {
categoryNotFound: false,
categoryHome: {
title: 'Welcome to the Shop',
handle: 'home',
products: [
'adjustable-stem',
'fizik-saddle-pak',