내가 받은 구성 요소에 "프로포즈"를 추가하자 마자: 감시자 "기능" (){ 이것을 반환한다._data.$$state }"

내가 받은 구성 요소에 "프로포즈"를 추가하자 마자: 감시자 "기능" (){ 이것을 반환한다._data.$$state }"

나는 내가 찾을 수 없는 아주 이상한 오류를 발견한다.

[부유 경고]:watcher "function() { callback에서 오류 발생. 이를 반환하십시오._data.$state }": "오류: [vuex] 돌연변이 처리기 외부의 vuex 저장 상태를 변경하지 마십시오."

나는 엄격한 모드로 vuex를 사용하고 있다.오류에도 불구하고 나는 돌연변이 처리기 외부의 어떤 vuex 저장 상태도 변경하지 않을 것이다.구성 요소가 vuex를 전혀 사용하지 않는 경우.나는 아래와 같은 것을 사용하지 않는 테스트 부품을 만들었다.

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

소품 부분을 추가하자마자 오류가 발생했어.나는 여기서 전체 프로젝트를 대표하거나 재현할 수 없다.그러나 어쨌든 특별한 것은 없다.

나에게 그것은 내가 그랬기 때문이다.routes = this.$router.options.routesNavigation(탐색) 설정용.

해답은 다음과 같았다. routes = JSON.parse(JSON.stringify(routes))할당하기 전에routes진술로 말하면

몇 가지 디버깅을 한 후에 나는 그것이 실제로 vuex와 vue-roouter에 의해 발생했다는 것을 알았다.

사실 내가 이 오류의 흔적을 자세히 들여다본다면 나는 전에 이것을 발견할 수 있었다.그vue-router.esm.js?8c4f:2279섹션은 힌트를 주고 있었지만 나는 그것을 볼 수 없었다.

...
reactiveSetter  @   vue.runtime.esm.js?2b0e:1055
normalizeProps  @   vue.runtime.esm.js?2b0e:1449
mergeOptions    @   vue.runtime.esm.js?2b0e:1521
Vue.extend  @   vue.runtime.esm.js?2b0e:5159
extractGuard    @   vue-router.esm.js?8c4f:2279
eval    @   vue-router.esm.js?8c4f:2263
eval    @   vue-router.esm.js?8c4f:1968
eval    @   vue-router.esm.js?8c4f:1968
...

나는 가게에서 경로를 구해서 경로에 (addRoutes()를 추가하고 있었다.

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

그러나 참조에 의해 통과되었기 때문에(그리고 라우터가 그것에 대해 약간의 변경을 하고 있었던 것 같다) 에러가 증가하고 있었다.그 루트는 "변종 핸드러 바깥에 있는 vuex 스토어를 섞으려고 했다"

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

나는 그것을 lodash로 딥 클로닝으로 해결했지만 다른 딥 클로닝도 사용할 수 있었다.

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

이제 그것은 매우 잘 작동한다.그게 누군가에게 도움이 되길 바래.

나는 이것에 잠시 어안이 벙벙했지만 알고 보니 정말 바보 같은 짓이었다.오류에서 알 수 있듯이, 우리는 실수로 Vuex 상태를 수정하고 있다.아마 너도 모르게 과제를 하고 있을 거야.내 실수는 다음과 같았다.

  computed: {
    foo() {
      return this.model.bar.find(
        (obj) => obj.key = this.$route.params.baz
      )
    },
  }

바보 같은 나, 하고 있었다.

obj.key = this.$route.params.baz

대신에

obj.key === this.$route.params.baz

평등 검사에 대한 나의 의도 대신에 그 물체는 참조에 의해 업데이트되고 있었다.

참조URL: https://stackoverflow.com/questions/61407754/as-soon-i-add-props-to-the-component-i-get-error-in-callback-for-watcher-fun