Vuex Getters 复制数组值

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

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
}

我从lesson.vue 文件中对getSelections 的呼叫：

<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

问题是，我的其他吸气剂都没有这样的行为。这个吸气剂是超级基本的。 当我在 Vue.js 开发工具中检查 store 和 getSelections getter 时，值是正确的并且没有重复。

您可以提供任何建议或指导，我们将不胜感激。

更新::::::

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 开发工具正确显示了所有选择 id。

Answer 1

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

如果这个 store 值被直接更新而没有操作和突变，那么 store 中的值将会改变，但是，vuejs 开发工具不会检测到这些更新的值，并且你的实际 store 数据和 dev tools 数据值将不匹配。