Getter undefined vuex and axios

Question

I’m trying to get a getter in my component but it says an error. This is my code store.js

const store = new Vuex.Store({
    state: {
        config:{
            themes: [],
            typographies:[],
        },
        user: {
            typography_id: 1,
            theme_id: null
        }
    },
    mutations: {
         FETCH_CONFIG(state, config) {
            state.config.themes = config.themes;
            state.config.typographies = config.typographies;
        },
        FETCH_USER(state, user) {
            state.user.theme_id = user.theme_id;
            state.user.typography_id = user.typography_id;
        },
    },
    actions: {
        fetchConfig({commit}) {
            axios.get('/api/config').then( function( response ){
                commit('FETCH_CONFIG', response.data);
            });
        },
        fetchUser({commit}) {
            axios.get('/api/user').then( function( response ){
                commit('FETCH_USER', response.data.data[0]);
            });
        },
    },
    getters: {
        themes(state) {
            return state.config.themes;
        },
        typographies(state) {
            return state.config.typographies;
        },
        typography(state) {
            if (state.user.theme_id == 1) {
                return state.user.typography_id;
            } else {
                var theme = state.config.themes.filter(function (el) {
                    return el.id == state.user.theme_id;
                });
                return theme[0].typography_id;
            }
        },
        user_theme(state) {
            return state.user.theme_id;
        },
    }
});

And in my component in computed I have:

...mapGetters(['typographies', 'typography'])

And ths is the error I get:

I guess I’m doing something wrong but I don’t know what.

Looks like the filter isn't matching anything, so theme[0] is undefined. — skirtle
yes, but if I make a console.log(theme[0].typography_id) it seems to work, but I get the error. — Marc Taulé
I suggest putting in some more logging into the typography getter to trace exactly what path it follows through the code. For example, try logging theme[0]. I suspect that getter is being called multiple times and you're only seeing logging in the cases where it succeeds. A debugger statement would also be a good way to debug this further. — skirtle
could you please share the snap of console.log(theme[0].typography_id) — Md. Jahidul Islam
var theme = state.config.themes.filter(function (el) { if( el.id == state.user.theme_id) { return { typography_id: el } } }); this might work — Md. Jahidul Islam

Unknown Unknown · Accepted Answer · 2020-04-01T13:15:45

Your getter for typography returns the error because first it goes into the else and then tries to return theme[0].typography_id - but there is an empty array.. if you are loading the date, later on, make sure that the getter returns null before data is loaded.. like:

const store = new Vuex.Store({
    state: {
        config:{
            themes: [],
            typographies:[],
        },
        user: {
            typography_id: 1,
            theme_id: null
        }
    },
    mutations: {
         FETCH_CONFIG(state, config) {
            state.config.themes = config.themes;
            state.config.typographies = config.typographies;
        },
        FETCH_USER(state, user) {
            state.user.theme_id = user.theme_id;
            state.user.typography_id = user.typography_id;
        },
    },
    actions: {
        fetchConfig({commit}) {
            axios.get('/api/config').then( function( response ){
                commit('FETCH_CONFIG', response.data);
            });
        },
        fetchUser({commit}) {
            axios.get('/api/user').then( function( response ){
                commit('FETCH_USER', response.data.data[0]);
            });
        },
    },
    getters: {
        themes(state) {
            return state.config.themes;
        },
        typographies(state) {
            return state.config.typographies;
        },
        typography(state) {
            if (state.user.theme_id == 1) {
                return state.user.typography_id;
            } else {
                var theme = state.config.themes.filter(function (el) {
                    return el.id == state.user.theme_id;
                });
                return theme.length > 0 ? theme[0].typography_id: 1;
            }
        },
        user_theme(state) {
            return state.user.theme_id;
        },
    }
});

Getter undefined vuex and axios

1 Answers