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

[TonyLuo]

Version

2.4.1

Reproduction link

https://github.com/TonyLuo/i-admin

Steps to reproduce

in the parent page call the child component, the child component do nothing with the vuex state.
vuex will not show any error message in following cases:

1. when remove the child component parent page, everything runs well
2. comment the props in the child component, everything is ok.

totally no idea what happen

What is expected?

vuex will not do any thing on the child component

What is actually happening?

`vue.esm.js?71e4:479 [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 )Error: [vuex] Do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js?37e1:96)
at Vue$3.store._vm.$watch.deep (vuex.esm.js?37e1:637)
at Watcher.run (vue.esm.js?71e4:2972)
at Watcher.update (vue.esm.js?71e4:2946)
at Dep.notify (vue.esm.js?71e4:778)
at Object.reactiveSetter [as props] (vue.esm.js?71e4:1000)
at normalizeProps (vue.esm.js?71e4:1322)
at mergeOptions (vue.esm.js?71e4:1370)
at resolveConstructorOptions (vue.esm.js?71e4:4273)
at createComponent (vue.esm.js?71e4:3606)`

[ktsn]

Please provide real reproduction.

[TonyLuo]

@ktsn pls refer to the this project: https://github.com/TonyLuo/i-admin
in the home.vue, when I comment the info-card component, everything runs well.
there is no action to modify the store state in the info-card component.

<info-card
        iconType="android-person-add"
        color="#2d8cf0"
        count="13425"
        message="Total Users">
</info-card>

[ktsn]

Thanks for sharing your project.
Can you boil down the problem and reduce the code as minimum as possible?
The project includes a lot of unrelated code so we cannot recognize whether it really is a bug or not.

[TonyLuo]

thanks for helping on the issue.
I just clean up the code and push into the project now : https://github.com/TonyLuo/i-admin
in the layout.js, i found that if i don't assign the value to appRouter, the vuex will not show any error message with or without component info-card.
if assign the value to appRouter, then vuex will show error message with child component info-card and will not show error message without child component info-card

import { appRouter } from '../../router'

// initial state

const state = {
  routers: [],
  appRouter: appRouter

}

[TonyLuo]

one more finding:
in layout.js, when delay to change the state , the error message is showed

// actions
const actions = {
  initial ({dispatch, commit, state}, data) {
    commit(types.INIT_LAYOUT)
  },
}

// mutations
const mutations = {
  [types.INIT_LAYOUT] (state, name) {
    // state.appRouter = appRouter // ---->>>> no error message
    setTimeout(() => {
      state.appRouter = [{'a':1},{'b':2}] // ----->>>> show error message
    }, 2000)
  }
}

[ktsn]

1. You shouldn't mutate the vuex state out of mutation as the error message says. If the error message appears when you are mutating the state out of mutation, it's expected behavior.
   See: https://vuex.vuejs.org/en/strict.html

2. Mutations must be synchronous in Vuex. If you include async processing in mutation, it won't be treated as mutation. So it's expected it produce the error message.
   See: https://vuex.vuejs.org/en/mutations.html#mutations-must-be-synchronous