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

user_12925440 0
Viewed 69

in my Nuxt.js app my store object is:

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

to update the attributes of curEditRP i wrote mutations function that called setCurEditRPAttrState:

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

from template i used it:

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

In a name update it works great But in a spouse update it throws an error Error: [vuex] do not mutate vuex store state outside mutation handlers

examples of values: name (works great):

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

spouse (throws an error):

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

clarification: value is v-model variable

nuxt.js vuex vue.js
1 Answers

Bs"d, I find the solution.

in update object or array of object i need itarate over object properties and update each one individually

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