Vuex error: “Do not mutate vuex store state outside mutation handlers.”

Question

I have a button on my website that performs the following action:

this.$store.commit('SET_THREAD_UPDATE', thread)

'thread' is an object consisting of multiple properties and objects and when the function is called there might be only a small change within an object of 'thread' or one of its properties.

'SET_THREAD_UPDATE' is a Vuex mutation and the only one of many that causes problems even though I am not doing anything differently.

const state = {
    threadUpdate: {}
}

const mutations = {
    SET_THREAD_UPDATE (state, userObj) {
        state.threadUpdate = userObj
    }
}

When the button that triggers the commit is pressed the first time, everything works like expected. But then, from the second time forward I get two errors and the commit doesn't do anything:

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." (found in <Root>)

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

I can't figure out the error. It doesn't make sense because I am using a mutation to change the state. Ideas anyone? Thanks!

After you get your threadUpdate in UI component, did you do any assign operations on it? — Yu Huang
it most likely that, at first commit, you added userObj as part of the store. After that you changed its content outside the store.. if you userObj.something = someValue outside of the mutation => You got the warning.. If you got something reference to the userObj, which is mutated outside the store. let v=userObj; v.something=someValue => You got the warning.. — Hiep

Hillcow Hillcow · Accepted Answer · 2018-08-28T08:42:05

Solution to the problem was to use JSON instead of regular JS objects. Not sure why though.

Vuex error: “Do not mutate vuex store state outside mutation handlers.”

1 Answers