问题描述
我有一个简单的课程创建者，我可以让老师针对各种类别进行选择，这些选择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
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
问题是，我的其他所有吸气剂都没有这种行为。这个吸气剂是超基本的。
当我在Vue.js开发工具中签出store和getSelections getter时，值是正确的，没有重复项。
我们将不胜感激。
UPDATE ::::::
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,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,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,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,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,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',setSelectedLexis({commit},payload) {
commit('setSelectedLexis',setSelectedExplorations({commit},payload) {
commit('setSelectedExplorations',setSelectedQuestions({commit},payload) {
commit('setSelectedQuestions',setSelectedPerformances({commit},payload) {
commit('setSelectedPerformances',setSelectedExtensions({commit},payload) {
commit('setSelectedExtensions',setSelectedGoals({commit},payload) {
commit('setSelectedGoals',};
所有这些似乎都工作正常，因为我的vuejs开发工具正确显示了所有选择ID。
解决方法
对于遇到类似问题的开发工具存储与实际存储值输出不匹配的任何人，这可能是由于您的代码未通过动作和变异方法正式更新存储值。
如果该商店值曾经直接进行更新而没有任何动作和突变，那么商店中的值将发生变化，但是，vuejs开发工具不会检测到这些更新后的值，并且您的实际商店数据和开发工具数据值将不匹配。