Получатель неопределенного vuex и axios - PullRequest
Новая
       20

Получатель неопределенного vuex и axios

0 голосов
/ 01 апреля 2020

Я пытаюсь получить геттер в своем компоненте, но он говорит об ошибке. Это мое хранилище кодов. 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;
        },
    }
});

И в моем компоненте computed у меня есть: 

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

И вот ошибка, которую я получаю:

enter image description here

Полагаю, я что-то не так делаю, но не знаю что.

1 Ответ

0 голосов
/ 01 апреля 2020

Ваш метод получения типографии возвращает ошибку, потому что сначала он переходит в else, а затем пытается вернуть theme [0] .typography_id - но есть пустой массив ... если вы загружаете дату, позже убедитесь, что геттер возвращает ноль до загрузки данных .. как: 

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