Vuex - 로컬 상태 복사본을 수정하면 변환 오류가 발생함

Vuex - 로컬 상태 복사본을 수정하면 변환 오류가 발생함

Vue 앱에서 설명할 수 없는 문제를 발견했습니다.상태의 로컬 복사본을 업데이트할 때 다음 오류가 발생합니다.

오류: [vuex] 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 마십시오.

여기 내 코드에서 수행 중인 작업의 샘플이 있습니다.

import { mapGetters } from 'vuex'
export default {
    name: 'sampleComponent',
    data() {
        return {
            userModel: null
        }
    },
    mounted() {
        this.userModel = this.user
    },
    computed: {
        ...mapGetters(['getApplicationUsers']),
        user() {
            return JSON.parse(JSON.stringify(this.getApplicationUsers[0]))
        }
    },
    methods: {
        addUserRole() {
            if (!this.userModel.userRoles.includes("newRole")) {
                this.userModel.userRoles.push("newRole")
            }
        }
        removeUserRole() {
            let index = this.userModel.userRoles.indexOf("newRole");
            if (index > -1) {
                this.userModel.userRoles.splice(index, 1)
            }
        }
}

removeUserRole이 호출될 때마다 변환 오류가 발생합니다.addUserRole을 사용하면 역할을 추가할 수 있지만 역할을 제거하려고 하면 소리가 납니다.

누가 나에게 이 행동을 설명해 줄 수 있습니까?내가 국가의 부분을 깊이 복사할 때, 그렇지 않나요?userModel이제 상태에서 분리되고, vuex에 의해 감시되지 않으며, 변형 가능합니까?

코드에 몇 가지 문제가 있습니다.

1. 구성 요소에서,data함수여야 합니다.
2. 의 모든 구성 요소 속성을 초기화해야 합니다.data그렇지 않으면 반응하지 않을 것입니다.
3. 상태 속성의 로컬 복사본을 만들려면data

이 모든 것을 염두에 두고, 이것을 시도해 보세요.

data () {
  return {
    objectModel: {...this.$store.getters.getApplicationUsers[0]}
  }
}

디케이드 문의 첫 번째 논평은 저를 답으로 이끌었습니다.JSON.parse/J를 사용하여 변경 가능한 개체를 만들었습니다.SON.stringify, 하지만 제 코드의 다른 곳에서 저는 그 물건을 가게의 임시 보관 장소로 커밋하고 있었습니다.나중에 로컬 개체를 변형하려고 했을 때 저장소에 해당 개체에 대한 참조가 있어 변형 오류가 발생했습니다.

첫 번째 작업에서 오류가 발생하지 않은 이유는 해당 시점에서 사용자 모델을 스토어에 커밋하지 않았기 때문입니다.userModel이 스토어에 커밋되면 분명히 오류를 던지기 시작했습니다.

언급URL : https://stackoverflow.com/questions/51034879/vuex-modifying-local-copy-of-state-causes-mutation-error