When using strict mode, you want to provide a deep copy of 'state' and 'getter' methods

[zzcong]

What problem does this feature solve?

In strict mode, when you make a deep copy of an object inside 'state', the 'dep' in the object will be copied as well, and an error will be reported: 'do not mutate vuex store state outside mutation handlers.'

What does the proposed API look like?

function deepCopy (name) { return JSON.parse(JSON.stringify(state[name])) }

[kiaking]

Sorry what is 'dep'? I've stored almost all kind of crazy data structure to state but never encountered the error. Could you provide the reproduction code for this?

[cuebit]

Since JSON.parse(JSON.stringify(...)) doesn't exhibit this behaviour, how are you performing the deep copy initially? Otherwise, seems like your state is originally malformed.

@kiaking Dep is the dependency object from Vue's observer.

[zzcong]

这是一个 'codesandbox' 例子，请查看，Take a look at the console. While it doesn't affect the production environment, it does affect the developer's judgment in the development environment

[kiaking]

You're not deep coping the object. So the warning is correct, you are mutating the original state inside component. slice method is shallow copy, you have to copy the object inside the array as well.

At first your store mutation is wrong. You need to change it to:

  mutations: {
    changeTest(state, list) {
      // state.test = list
      state.testList = list
    }
  }

Then, change your changeList method in your HelloWorld component:

changeList () {
  let list = this.testList.slice()

  list = list.map(v => {
    // Copy object.
    const newItem = { ...v }

    newItem.foo = 'barnew' 

    return newItem
  })

  this.changeTest(list)
}

However, if this is all you want to do, you can just map the list and be done with it.

changeList () {
  const list = this.testList.map((v) => {
    return { foo: 'barnew' }
  })

  this.changeTest(list)
}

Hope it gets you where you want to go 👍