Nuxt.js: Error: [vuex] Do not mutate vuex store state outside mutation handlers

[EasonShen1989]

I upgrade to the latest version(v1.0.0-rc11)，how to handle the error？

_{This question is available on Nuxt.js community (#c1713)}

[alexchopin]

Add this code to your store/index.js file.

export const strict = false

Edit from @manniL:

This only hides the error but does not resolve the root cause!
Instead, make sure that you don't directly mutate array/objects returned by the VueX state. Instead, you can use methods like someVuexArray.slice() to create a shallow copy of that array.

[maxim25]

Hi, I have vuex setup as modules and am using mutations like so:

this.$store.commit('myModule/myMutation', payload)

Is there aa reason that this fix is not mentioned in the docs, or is it a bug?
https://nuxtjs.org/guide/vuex-store/#modules-mode

Thanks

[traversng]

@alexchopin would you mind explaining how this is a fix? What is happening underneath the hood? Thanks

[apollodaeteam]

I think we know what the issue is. When the payload mutates the object, it will throw an error. EX: If myModule/myMutation = an empty object { } , and the payload you are sending is an object like " payload = { a: '1', b: '2' } " , then it won't work without setting strict to false or unless you specifically declare the 'myMutation' object has the props 'a' and 'b'.

// This is payload being set with " this.$store.commit('myModule/myMutation', Payload) "
Payload = {
a: "Foo",
b: "Bar"
}

Won't work:

// store file
export const state = () => ({
myModule: {
myMutation: " " <-- No props defined
}
})

Will work:

// store file
export const state = () => ({
myModule: {
myMutation: {
a: " ", <-- props defined
b: " " <-- props defined
}
}
})

[fredski02]

I'm probably a bit late to the game here but this happened to me when i had a nested object within my state.

const state = { mapEditable : true, areaDetailsPanel : false, centerPolygon : false, savedAreas : [], areasToQuery : [], areaCreator : { } }

i was just adding what ever properties to areaCreator. doing it once is fine but doing it twice and you're trying to overwrite. I used Object.assign({}, state.areaCreator) to first a make a copy of my object before altering it and setting it in my mutation

[robbplo]

@fredski02 I had the same issue but i think i found a solution.

First i tried cloning the object with a spread operator: this.form = { ...this.$store.getters.myObject }
This worked for properties in the root level of the object, but it also had an array of objects which i could not change with v-model

Using lodash.cloneDeep fixed this however. If your project does not use lodash you can write a similar function that loops over the keys of your object and returns a copy of them.

[r-nicol]

I ran into this today when doing the following:

let res = ...
let progress = store.getters.progress
progress[res[1]] = res[2]
store.commit('changeProgress', progress)

With a mutation method as:

changeProgress (state, progress) {
  state.progress = progress
}

As you can see I am editing the state outside of the mutation method and only using the mutation method to replace the state. The way I fixed this error was to do as it states, move all the mutation code inside the mutation method. Now my code is:

let res = ...
store.commit('changeProgress', res)

And my mutation method is:

changeProgress (state, res) {
  state.progress[res[1]] = res[2]
}

Let us know if that helps

[cicsolutions]

@r-nicol ... you are the man! thanks for pointing out, what is probably the intended use for passing a payload object and what makes vuex happy

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.