Установка исходных локальных данных из хранилища 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
}

state vue.js vuex mutation
person Drew Baker    schedule 16.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ОК, я разобрался! Компонент флажка (который я не писал) делал следующее:

        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-модель value, а также вы должны знать о передаче ссылок на объекты, и поэтому оператор распространения объекта - настоящая помощь.

person Drew Baker    schedule 16.10.2020