Vuex getter复制数组值

Question

我有一个简单的课程生成器，允许教师为各种类别进行选择，这些选择ID被收集并分组在一起，我希望在最后将它们全部作为课程计划返回。

然而，我有一个奇怪的问题，我无法解决。我的Vuex存储正确显示选择，但是我的getter复制了我的所有数组。

选择完成后，我的Vuex商店通过Vue.js开发工具插件显示了这样的内容：

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

存储。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。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

问题是，我的其他获得者都不是这样的。这个getter是超基本的。当我在Vue中签出store和getSelectionsgetter时。js dev tools这些值是正确的，没有重复项。

如果您能提供任何建议或指导，我们将不胜感激。

更新：：：：：：

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.html" target="_blank">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开发工具正确显示所有选择id，因此所有这些工具似乎都正常工作。

Answer 1

对于任何有类似问题的人，如果您的开发工具存储与您的实际存储值输出不匹配，这可能是由于您的代码没有通过操作和突变方法正式更新存储值。

如果直接更新此存储值而不执行任何操作和更改，则存储中的值将发生更改，但是vuejs开发工具将不会检测到这些更新的值，并且实际存储数据和开发工具数据值将不匹配。