引入vuex开了严格模式，在组件中没用到状态管理，仍然会在浏览器控制台报错

Question

1. 父组件截图如下
   子组件截图如下

2. 浏览器控制台报错如下vue.esm.js?7a34:434 [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>)vue.esm.js?7a34:523 Error: [vuex] Do not mutate vuex store state outside mutation handlers.
   at assert (eval at <anonymous> (app.js:997), <anonymous>:101:27)
   at Vue$3.store._vm.$watch.deep (eval at <anonymous> (app.js:997), <anonymous>:642:5)
   at Watcher.run (eval at <anonymous> (app.js:717), <anonymous>:2863:19)
   at Watcher.update (eval at <anonymous> (app.js:717), <anonymous>:2837:10)
   at Dep.notify (eval at <anonymous> (app.js:717), <anonymous>:733:13)
   at Object.reactiveSetter [as props] (eval at <anonymous> (app.js:717), <anonymous>:963:11)
   at normalizeProps (eval at <anonymous> (app.js:717), <anonymous>:1268:17)
   at mergeOptions (eval at <anonymous> (app.js:717), <anonymous>:1303:3)
   at resolveConstructorOptions (eval at <anonymous> (app.js:717), <anonymous>:4048:32)
   at createComponent (eval at <anonymous> (app.js:717), <anonymous>:3453:3)

3. 如上所示，没有在父子组件中使用vuex管理状态，但是总是报vuex的错误，实在是找不到原因所在，求各位帮忙看看怎么回事

Answer 1

子组件里的data修改一下，不能用this来定义的，而且这里也不需要在data里面定义width1，poros里的width改为width1，而width1应该是从父组件那边传过来的。参考下组件之间的传值链接描述

Answer 2

父组件

<search-input :width="60"></search-input>

子组件

<search :style="'width:'+width1"></search>

Answer 3

问题解决。是因为用了动态路由，然后又把路由放到了vuex中导致的。路由变化的时候不会通过mutation改变路由状态，导致报错的。虽然为什么只在这个子组件里报错还是没有找到原因。。

Answer 4

请问下楼主是怎么解决的？

Answer 5

我也出现了这个问题，搜索答案，发现下面有个朋友说的很对，我在路由当中用了store来commit加载动画，切换路由之后就包这个错误，已解决

Answer 6

我的解决方式很奇怪，或者说并不算解决，在state中，不显示声明存储router的属性，就不会报错了。

Answer 7

麻烦问下，怎么解决的，能贴一部分代码么？感谢 你们的 深拷贝方法能贴出来看看么

Answer 8

和你的问题一样，最后终于解决了