Nuxt.js 存儲 - 更新存儲對象中的對象 - 拋出錯誤：[vuex] 不在突變處理程序之外改變 vuex 存儲狀態

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] do not mutate vuex store state outside mutation handlers

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

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;
    }
},