Building an E-Commerce Store - Browsing Products Chapter 10With a category assigned, we can now load the products based on the handles stored in the
category. Move the code from the products computed function into the getter. Combine
the variable assignments together and remove the store product retrieval variable, as we
have the state readily available. Ensure the code that checks to see whether the category
exists is still in place:
categoryProducts: (state) => (slug) => {
if(Object.keys(state.categories).length) {
let category = false,
products = [];if(slug) {
category = this.$store.state.categories[this.slug];
} else {
category = state.categoryHome;
}if(category) {
for(let featured of category.products) {
products.push(state.products[featured]);
}
}
}
}Lastly, we can add a new productDetails array on the category with the fleshed-out
product data. Return the category at the end of the function. If the slug variable input
exists as a category, we will get all of the data back. If not, it will return false – from
which we can display our PageNotFound component:
categoryProducts: (state) => (slug) => {
if(Object.keys(state.categories).length) {
let category = false,
products = [];if(slug) {
category = state.categories[slug];
} else {
category = state.categoryHome;
}if(category) {
for(let featured of category.products) {
products.push(state.products[featured]);
}category.productDetails = products;