Vuex 저장소에서 초기 로컬 데이터를 설정하여 "변환 안 함" 오류가 발생함

Vuex 저장소에서 초기 로컬 데이터를 설정하여 "변환 안 함" 오류가 발생함

Vuex에서 컴포넌트의 로컬 데이터로 초기 상태 데이터를 로드하는 올바른 방법을 이해했다고 생각했는데, "vuex"가 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 않음" 오류가 발생하는 이유는 무엇입니까?난 돌연변이 처리기를 사용하고 있어!

특정 페이지에서 돌아오지 않는 한 컴포넌트 데이터를 빈 상태로 시작하고 싶다(Vuex에서 일부 값을 가져옵니다).

컴포넌트가 사용 중입니다.v-model=“selected”많은 체크박스에서요그리고 다음과 같은 것이 있습니다.

// Template
<grid-leaders
    v-if="selected.regions.length"
    v-model="selected"
/>

// Script
export default {
    data() {
        return {
            selectedProxy: {
                regions: [],
                parties: [],
            },
        }
    },
    computed: {
        selected: {
            get() {
                return this.selectedProxy
            },
            set(newVal) {
                this.selectedProxy = newVal

                // If I remove this next line, it works fine.
                this.$store.commit("SET_LEADER_REGIONS", newVal)
            },
        },
    },
    mounted() {
        // Restore saved selections if coming back from a specific page
        if (this.$store.state.referrer.name == "leaders-detail") {
            this.selectedProxy = {...this.$store.state.leaderRegions }
        }
    }
}

// Store mutation
SET_LEADER_REGIONS(state, object) {
    state.leaderRegions = object
}

알았어, 알았어!체크박스 컴포넌트(기입하지 않은 것)는 다음과 같이 동작하고 있습니다.

        updateRegion(region) {
            const index = this.value.regions.indexOf(region)

            if (index == -1) {
                this.value.regions.push(region)
            } else {
                this.value.regions.splice(index, 1)
            }

            this.$emit("input", this.value)
        },

회선this.value.regions.push(region)문제가 있습니다.편집은 할 수 없습니다.this.value직접 지지하다내가 만든 건 이거야

        updateRegion(region) {
            const index = this.value.regions.indexOf(region)
            let regions = [...this.value.regions]

            if (index == -1) {
                regions.push(region)
            } else {
                regions.splice(index, 1)
            }

            this.$emit("input", {
                ...this.value,
                regions,
            })
        },

그리고 내 계산에 이게 필요했어selected:

        selected: {
            get() {
                return this.selectedProxy
            },
            set(newVal) {
                // Important to spread here to avoid Vuex mutation errors
                this.selectedProxy = { ...newVal }
                this.$store.commit("SET_LEADER_REGIONS", { ...newVal })
            },
        },

그리고 이제 잘 작동한다!

v-model을 편집할 수 없는 것이 문제라고 생각합니다.value오브젝트에 대한 참조를 전달해야 하기 때문에 오브젝트 확산 연산자가 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/64389603/setting-intial-local-data-from-vuex-store-giving-do-not-mutate-error