As a newcomer to frontend development and Vue js, I am looking to integrate state management into my application. While setting the state with the response from my API works fine, I encountered an issue when trying to filter the results in a getter using the filter function (getActiveLeagues). The error message 'filter is not a function' suggests that the result is not being treated as an array, even though I have declared my state as an array:
const state = {
leagues: [],
};
const getters = {
getAllLeagues: (state) => state.leagues,
getActiveLeagues: (state) => state.leagues.filter((league) => league.archivated === false),
};
const actions = {
async getAllLeagues({ commit }) {
const response = await axios.get(`${server.baseURL}/api/league`);
console.log(response);
commit('setLeagues', response);
},
};
const mutations = {
setLeagues(state, leagues) {
state.leagues = leagues;
},
};
export default {
state,
getters,
actions,
mutations,
};
I receive an array from the API:
https://i.sstatic.net/wYpVr.png
This is how my Vuex.Store call looks like:
import Vue from 'vue';
import Vuex from 'vuex';
import posts from './modules/postModule';
import leagues from './modules/leagueModule';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
posts,
leagues,
},
});
The result of the state watch: https://i.sstatic.net/TOzlG.png https://i.sstatic.net/CShtv.png It may just be a simple mistake on my end since I am new to this, but I appreciate any help. Thank you.