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

菜鸟架构师之路
  • 41
  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的错误,实在是找不到原因所在,求各位帮忙看看怎么回事

评论
阅读 10.8k
8 个回答

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

父组件

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

子组件

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

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

慢八拍
  • 2
新手上路,请多包涵

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

一一一明智
  • 2
新手上路,请多包涵

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

keywhut
  • 2
新手上路,请多包涵

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

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

冰雪
  • 1
新手上路,请多包涵

和你的问题一样,最后终于解决了图片描述

图片描述

宣传栏