[Vuejs]-Refactoring getters Vue.js (Vuex)

0πŸ‘

βœ…

I don’t think your function itself is bad. You can indeed boil it down to just one though.
Keep in mind that if your page should be getting several thousand items you should consider doing this on the backend with some form of search-engine (elastic, algolia).

products(options) {
  if (state.color === "All colors" && state.size == "All sizes") {
    return state.allShoes.filter((shoe) => shoe[options.category] === options.filter);
  } else {
    return state.allShoes.filter((shoe) => {
      return (
        (state.color === "All colors" ||
          (shoe.color === state.color && shoe[options.category] === options.filter)) &&
        (state.size === "All sizes" || shoe.size.includes(state.size)) &&
        shoe[options.category] === options.filter
      );
    });
  }
}

// Example to call the function
const products = this.products({
  category: "gender",
  filter: "Female",
});

Leave a comment