Nuxt.js store - update object in store object - throw Error: [vuex] do not mutate vuex store state outside mutation handlers

Question

在我的 Nuxt.js 应用中我的商店对象是：

export const state = () => ({
 curEditRP: {
    attributes:{
     name:"",
     spouse: {
       type: "", // wife/husband
       name: ""
     }
   }
})

为了更新 curEditRP 的属性，我编写了调用 setCurEditRPAttrState:

的突变函数

export const mutations = {
 setCurEditRPAttrState(state, payload) {
    state.curEditRP.attributes[payload.attr] = payload.value;
 },
}

我使用的模板：

this.$store.commit("setCurEditRPAttrState", {
     value: value,
     attr: attributeName,
 });

在名称更新中效果很好但是在配偶更新中它会抛出一个错误错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态

值示例： 姓名（效果很好）：

this.$store.commit("setCurEditRPAttrState", {
         value: "Peter",
         attr: "name",
 });

配偶（抛出错误）：

this.$store.commit("setCurEditRPAttrState", {
             value: { type:"wife",name:"S" },
             attr: "spouse",
     });

澄清：value是v-model变量

Answer 1

Bs"d，我找到了解决方案。

在更新对象或对象数组中，我需要遍历对象属性并单独更新每个属性

setCurEditRPAttrState(state, payload) {
    if(typeof(payload.value) == 'object') {

        let stateAttribute = state.curEditRP.attributes[payload.attr];

        if(Array.isArray(payload.value)) {

            let stateArrLen = stateAttribute.length;
            let valuelen = payload.value.length;

            while(stateArrLen > valuelen) {
                stateAttribute.pop();
                stateArrLen --;
            }

            for (let index = 0; index < payload.value.length; index++) {
                const element = payload.value[index];
                if(stateAttribute.length < index + 1) stateAttribute.push({});
                Object.keys(element).forEach( key => {
                    Vue.set(stateAttribute[index], key, element[key])
                })
            }
        }
        else {
            Object.keys(payload.value).forEach( key => {
                Vue.set(stateAttribute, key, payload.value[key])
            })
        }
    }
    else {
        state.curEditRP.attributes[payload.attr] = payload.value;
    }
},

Nuxt.js store - update object in store object - throw Error: [vuex] do not mutate vuex store state outside mutation handlers

Nuxt.js store - update object in store object - throw Error: [vuex] do not mutate vuex store state outside mutation handlers

vue.js

vuex

nuxt.js