Issue with Vuex Store Index.js:
I am encountering a problem while trying to filter an array using another array. When attempting to access the filter function within its object, I receive the following error:
TypeError: Cannot read properties of undefined (reading 'includes')
at aspect_ratio (index.js?9101:72:1)
All my filter functions are stored in an object structured like this:
export const filter_functions = {
form_factor_landscape: (obj) => {
return obj["Form Factor"] === "Landscape";
},
form_factor_portrait: (obj) => {
return obj["Form Factor"] === "Portrait";
},
aspect_ratio: (obj) => state.current_features.includes(obj["Aspect Ratio"]),
};
Within my getters section, I aim to utilize the aspect_ratio filter in this manner:
export const getters = {
filtered_items(state) {
const filteredArray = [...state.allHandhelds].filter(
filter_functions[state.current_sort]
);
return filteredArray.filter(filter_functions.aspect_ratio);
}
},
};
This is how my state is defined:
export const state = () => ({
current_sort: "all_handhelds",
current_features: ["a", "b", "c"],
allHandhelds: [],
});
Initial Thoughts:
It appears that there may be an issue when accessing the object containing the filter functions or specifically retrieving the current_features array from the state.
Interestingly, moving the filter function outside the object and directly incorporating it seems to solve the problem. For example:
return filteredArray.filter((obj) => state.current_features.includes(obj["Aspect Ratio"]));
Any insights on what could be causing this error?