Vuex Getters, дублирующие значения массива

У меня есть простой создатель уроков, где я позволяю учителям делать выборки для различных категорий, эти идентификаторы выбора собираются и группируются вместе, и я хочу вернуть их все в конце в качестве плана урока.

Однако у меня возникла странная проблема, которую я не могу понять. Мое хранилище Vuex показывает выбор правильно, однако мой геттер дублирует все мои массивы.

После того, как выбор сделан, мой магазин Vuex показывает что-то вроде этого через плагин Vue.js dev-tools:

lesson_store:Object
    lesson:Object
        selected_event:1
        selected_exploration:Array[1]
            0:1
        selected_extensions:Array[1]
            0:1
        selected_goals:Array[1]
            0:54
        selected_lexis:Array[1]
            0:2

store.js состояние и получатель:

const state = {
    lesson: {
        selected_event: '',
        selected_exploration: [],
        selected_extensions: [],
        selected_goals: [],
        selected_lexis: [],
    }
};

getSelections(state) {
    console.log('GETTER SELECTIONS', state.lesson);
    return state.lesson
}

Мой звонок getSelections из lesson.vue файла:


<template><button @click="saveLesson">Save</button></template>


methods: {
    saveLesson () {
        console.log('GET RETURN OF SELECTIONS',this.$store.getters["getSelections"]);
    },
}

Теперь мой вывод на консоль:

lesson_store:Object
    lesson:Object
        selected_event:1
        selected_exploration:Array[2]
            0:1
            0:1
        selected_extensions:Array[2]
            0:1
            0:1
        selected_goals:Array[2]
            0:54
            0:54
        selected_lexis:Array[2]
            0:2
            0:2

Дело в том, что ни один из моих геттеров не ведет себя так. Этот геттер очень простой. Когда я проверяю store и getSelections getter в инструментах разработчика Vue.js, значения верны и нет дубликатов.

Мы будем очень признательны за любой совет или указание, которое вы можете дать.

ОБНОВИТЬ::::::

Действия и мутации для Lesson_Store

// create mutations
const mutations = {
    setSelectedEvent(state, payload) {
        // state.lesson.selected_event = payload

        if (state.lesson.selected_event === payload) {

            state.lesson.selected_event = '';
        } else {
            state.lesson.selected_event = payload
        }

    },

    setSelectedReading(state, payload) {

        if (state.lesson.selected_reading === payload) {
            state.lesson.selected_reading = '';
        } else {
            state.lesson.selected_reading = payload
        }

    },

    setSelectedLexis(state, payload) {

        // if event is already in array, then remove it with filter
        // otherwise push it to the array
        if (state.lesson.selected_lexis.includes(payload)) {
            state.lesson.selected_lexis = state.lesson.selected_lexis.filter(function (item) {
                return item !== payload;
            });
        } else {
            state.lesson.selected_lexis.push(payload);
        }

        // state.lesson.selected_lexis = payload
    },

    setSelectedExplorations(state, payload) {

        // if event is already in array, then remove it with filter
        // otherwise push it to the array
        if (state.lesson.selected_exploration.includes(payload)) {
            state.lesson.selected_exploration = state.lesson.selected_exploration.filter(function (item) {
                return item !== payload;
            });
        } else {
            state.lesson.selected_exploration.push(payload);
        }

        // state.lesson.selected_lexis = payload
    },

    setSelectedQuestions(state, payload) {

        // if event is already in array, then remove it with filter
        // otherwise push it to the array
        if (state.lesson.selected_questions.includes(payload)) {
            state.lesson.selected_questions = state.lesson.selected_questions.filter(function (item) {
                return item !== payload;
            });
        } else {
            state.lesson.selected_questions.push(payload);
        }

        // state.lesson.selected_lexis = payload
    },

    setSelectedPerformances(state, payload) {

        // if event is already in array, then remove it with filter
        // otherwise push it to the array
        if (state.lesson.selected_performances.includes(payload)) {
            state.lesson.selected_performances = state.lesson.selected_performances.filter(function (item) {
                return item !== payload;
            });
        } else {
            state.lesson.selected_performances.push(payload);
        }

    },

    setSelectedExtensions(state, payload) {

        // if event is already in array, then remove it with filter
        // otherwise push it to the array
        if (state.lesson.selected_extensions.includes(payload)) {
            state.lesson.selected_extensions = state.lesson.selected_extensions.filter(function (item) {
                return item !== payload;
            });
        } else {
            state.lesson.selected_extensions.push(payload);
        }

    },

    setSelectedGoals(state, payload) {

        // if event is already in array, then remove it with filter
        // otherwise push it to the array
        if (state.lesson.selected_goals.includes(payload)) {
            state.lesson.selected_goals = state.lesson.selected_goals.filter(function (item) {
                return item !== payload;
            });
        } else {
            state.lesson.selected_goals.push(payload);
        }

    },


};

// create actions
const actions = {
    setSelectedEvent({commit}, payload) {
        commit('setSelectedEvent', payload);
    },

    setSelectedReading({commit}, payload) {
        commit('setSelectedReading', payload);
    },

    setSelectedLexis({commit}, payload) {
        commit('setSelectedLexis', payload);
    },

    setSelectedExplorations({commit}, payload) {
        commit('setSelectedExplorations', payload);
    },

    setSelectedQuestions({commit}, payload) {
        commit('setSelectedQuestions', payload);
    },

    setSelectedPerformances({commit}, payload) {
        commit('setSelectedPerformances', payload);
    },

    setSelectedExtensions({commit}, payload) {
        commit('setSelectedExtensions', payload);
    },

    setSelectedGoals({commit}, payload) {
        commit('setSelectedGoals', payload);
    },
};

Все они работают правильно, потому что мои инструменты vuejs dev правильно отображают все идентификаторы выбора.


person redhaushq    schedule 19.09.2020    source источник
comment
Я не уверен, имеет ли это значение, но этот lesson_store находится в импортированном модуле.   -  person redhaushq    schedule 20.09.2020
comment
Куда вы звоните saveLesson()?   -  person Daniel_Knights    schedule 20.09.2020
comment
Я добавил кнопку в файл lesson.vue ‹button @ click = saveLesson› Сохранить ‹/button› Я также пытался просто загрузить данные при создании (), но это создает такое же дублирование   -  person redhaushq    schedule 20.09.2020
comment
Это странно. А как насчет вашего действия и мутации, которые устанавливают данные? Не могли бы вы их опубликовать?   -  person Daniel_Knights    schedule 20.09.2020
comment
Я обновился с помощью Мутаций и Действия, здесь больше полей, чем в моей упрощенной версии, но все поля массива дублируют значения идентификаторов, если у меня есть один, два или три выбора, они будут дублированы на два, четыре и шесть соответственно.   -  person redhaushq    schedule 20.09.2020
comment
Игнорируя вывод инструментов разработчика, уверены ли вы, что ваши if утверждения оценивают то, что вы ожидаете? Единственное, что я вижу, это может быть причиной того, что ваши мутации выставляют одно и то же значение в каждом блоке else.   -  person Daniel_Knights    schedule 20.09.2020
comment
Думаю, это возможно, но я не знаю, как это оценить без инструментов разработчика. Функциональность, которую я программирую, работает правильно: если я нажимаю на элемент, он добавляется в список выбора, список выбора оценивается и устанавливает активный класс, который выделяет элемент в пользовательском интерфейсе, при повторном нажатии элемента они удаляются из списка выбора и выделение удаляется. Я зарегистрировал в консоли добавление и удаление в моей логике if, и, похоже, он работает правильно. Есть ли другой способ, отличный от инструментов разработчика, который вы бы порекомендовали для оценки значений моего магазина, который вы бы порекомендовали?   -  person redhaushq    schedule 20.09.2020
comment
Вы можете попробовать debugger, но если все указывает чтобы он работал правильно, кроме журнала консоли, я не уверен, что предложить.   -  person Daniel_Knights    schedule 20.09.2020
comment
Хорошо, я проверю. Спасибо   -  person redhaushq    schedule 20.09.2020
comment
@Daniel_Knights благодарит за ввод, в моих операторах if происходила какая-то забавная круговая логика, которая создавала странное поведение. Я пытался проголосовать за ваш комментарий, так что спасибо.   -  person redhaushq    schedule 20.09.2020


Ответы (1)


Для всех, у кого есть подобные проблемы, когда ваше хранилище инструментов разработчика не соответствует вашему фактическому выходу значений хранилища, вероятно, это связано с тем, что ваш код не обновляет значения хранилища формально с помощью подхода действий и мутаций.

если это значение хранилища когда-либо обновляется напрямую без действий и мутаций, значение в хранилище изменится, однако эти обновленные значения не будут обнаружены инструментами разработчика vuejs, и ваши фактические данные хранилища и значения данных инструментов разработчика не будут совпадать.

person redhaushq    schedule 20.09.2020