从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,{
                ...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，而且还必须知道将引用传递给对象，因此对象散布运算符是真正的帮助。