[Vuejs]-Getter undefined vuex and axios

0👍

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;
        },
    }
});

Leave a comment