为什么在本地更改 Vuex 存储对象的深层副本会导致该更改应用于 Vuex 存储？

Question

在我下面的代码中，我首先尝试从 Vuex 存储中复制一些数据，以便在不更改存储本身的数据的情况下将其发送到后端之前更改一件小事。我使用 Lodash cloneDeep() 进行深度复制并将其存储在局部变量中。我假设我对这个局部变量所做的任何更改都不会影响商店中的数据。但事实证明，即使我做了一个深拷贝，这个局部变量仍然引用了存储中的状态。

let localCopy = _.cloneDeep(store.getters["course/course"]);
localCopy.image.file = null;

我尝试了很多不同的方法来制作这个副本，但它们都完整地保留了对商店中状态的引用。我正在寻找一种方法来制作此副本并根据自己的喜好更改它，而无需更改商店状态。

我的店长这样

export default {
namespaced: true,
state: {
    course: {
        id: null,
        name: "naamloos",
        description: "...",
        image: null,
        information_slides: [],
        question_slides: [],
    }
},
mutations: {
    loadCourse(state, value) {
        state.course = value;
    },

    unloadCourse(state) {
        state.course = {
            id: null,
            name: "",
            description: "",
            image: {
                file: null,
                path: null,
            },
            information_slides: [],
            question_slides: [],
        }
    },

    updateIds(state, value) {
        state.course = value;
    },

    updateImage(state, value) {
        state.course.image = value;
    },

    addQuestionSlide(state, value){
        state.course.question_slides.push(value);
    },

    deleteQuestionSlide(state, index){
        let indexInQuestionSlidesArray = state.course.question_slides.findIndex(item => {return item.index === index});
        state.course.question_slides.splice(indexInQuestionSlidesArray, 1);
        this.dispatch('course/resetIndexes', state);
    },

    addInformationSlide(state, value){
        state.course.information_slides.push(value);
    },

    deleteInformationSlide(state, index){
        let indexInInformationSlidesArray = state.course.information_slides.findIndex(item => {return item.index === index});
        state.course.information_slides.splice(indexInInformationSlidesArray, 1);
        this.dispatch('course/resetIndexes', state);

    },

},
actions: {
    resetIndexes(_state, state) {
        let merged = Object.values([...state.course.information_slides, ...state.course.question_slides].reduce((r, o) => (r[o.index] = o, r), {}));
        for(let i = 0; i < merged.length; i++) {
            merged[i].index = i;
        }
    }
},
getters: {
    course (state) {
        return state.course;
    },

    id (state) {
        return state.course.id;
    },

    name (state) {
        return state.course.name;
    },

    description (state) {
        return state.course.description;
    },

    informationSlides (state) {
        return state.course.information_slides;
    },

    questionSlides (state) {
        return state.course.question_slides;
    },

    selectedSlide: (state) => (index) => {
        let allSlides = [...state.course.information_slides, ...state.course.question_slides];
        let selectedSlide = allSlides.filter(slide => {
            return slide.index === index;
        })
        return selectedSlide[0];
    },

    image (state) {
        return state.course.image;
    }
}

}

Answer 1

你可以尝试这样的事情：

let localCopy = _.cloneDeep({ ...store.getters["course/course"] });
localCopy.image.file = null;