Vue.js 我一加上「；道具；对于我得到的组件：watcher回调出错；函数（）{returnthis._data.$$state}"；

我有一个很奇怪的错误，我找不到

[Vue warn]：监视程序“函数（）{返回此._data.$$state}”的回调出错：“错误：[vuex]不要在变异处理程序之外变异vuex存储状态。”

我在严格模式下使用vuex。尽管有错误，我没有在变异处理程序之外变异任何vuex存储状态。该组件根本没有使用vuex。我创建了一个测试组件，它不使用下面的任何东西

<template>
  <div>
    TEST COMPONENT
  </div>
</template>  
<script>
export default {
  name: 'testComponent',
  props: ['testProp'],
}
</script>

测试组件
导出默认值{
名称：“testComponent”，
道具：['testProp']，
}

---

当我添加道具部分时，我得到了错误。我无法在这里代表整个项目或复制它。但无论如何，没有什么特别的

经过一些调试之后，我发现它实际上是由vuex和vue路由器引起的

事实上，如果我仔细查看错误的痕迹，我以前就可以找到这个。

vue router.esm.js？8c4f:2279

部分给出了一个提示，但我看不到（我想是缺乏vue经验）

我正在从商店获取路由并将（addRoutes（））添加到路由中

router.beforeEach((to, from, next) => {
...
    router.addRoutes([store.getters['route/getRoute']]);
...
}

但是因为它是通过引用传递的（我猜路由器正在对它做一些更改），所以错误增加了。这条路线试图“在变异汉德外变异vuex商店”

我通过使用lodash进行深度克隆（如下所示）解决了这个问题，但也可以使用其他深度克隆

let routeDeepClone = _.cloneDeep([store.getters['route/getRoute']]);
router.addRoutes(routeDeepClone);

---

现在它工作得很好。希望它能帮助别人。

对我来说，这是因为我做了

routes=this.$router.options.routes

设置导航

---

在将

路由

分配给state之前，解决方案是

routes=JSON.parse（JSON.stringify（routes））

。

这些听起来不相关。这个组件是如何使用的？实际上我减少了它。我一直跟踪到我发现错误出现在我添加道具部分之后。所以它只是一个简单的测试组件。可能是错误来自另一个部件。也许是vuex本身。但是在我添加道具之前不会出错。但是随机组件的道具和Vuex之间没有内在的联系。例如，如果我使用Vuex启动一个新项目并在此处使用此组件，则不会出现此错误。因此，这些信息不足以让任何人猜测，我们也看不到您的Vuex或该组件的使用方式。看一下testProp中到底传递了什么？如果这是vuex商店的道具，那么这就是它@阿纳托利：我通过什么并不重要。即使是一个简单的字符串也会这样做。当我移除道具时，我不会得到错误。

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

let routeDeepClone = _.cloneDeep([store.getters['route/getRoute']]);
router.addRoutes(routeDeepClone);