vuex: 상태 필드 "foo"가 "foo"에서 이름이 같은 모듈에 의해 재정의되었습니다.

vuex: 상태 필드 "foo"가 "foo"에서 이름이 같은 모듈에 의해 재정의되었습니다.

콘솔에 다음 경고가 표시됩니다.

[vuex] 상태 필드 "foo"가 "foo"에서 이름이 같은 모듈에 의해 재정의되었습니다.

그게 무슨 의미이고 내가 뭘 잘못했을까?

이는 Vuex 3.1.2에 추가된 새로운 경고입니다.

https://github.com/vuejs/vuex/releases/tag/v3.1.2

이 로그는 속성 이름이 다음 중 하나일 때 기록됩니다.state다음과 같이 모듈 이름과 경합합니다.

new Vuex.Store({
  state: {
    foo: 'bar'
  },
  modules: {
    foo: {}
  }
})

접속을 시도하는 경우state.foo그 가치는 다음과 같습니다.'bar'하지만 그것은 실제로 '그녀석에게state의foo모듈.

이 문제는 에서 속성을 삭제함으로써 해결할 수 있습니다.state오브젝트 또는 속성 또는 모듈의 이름을 변경합니다.

다음은 관련 경고를 기록하고 결과 값을 보여주는 작은 예입니다.state.foo:

const store = new Vuex.Store({
  state: {
    foo: 'bar'
  },
  modules: {
    foo: { state: { flag: 2 } }
  }
})

console.log(store.state.foo)

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>

업데이트:

이 경고는 테스트 중 등 동일한 구성 개체를 사용하여 여러 저장소를 생성하는 경우에도 기록될 수 있습니다.

다음은 예를 제시하겠습니다.

const config = {
  state: {},

  modules: {
    foo: {}
  }
}

const store1 = new Vuex.Store(config)
const store2 = new Vuex.Store(config)

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>

문제는 구성에 루트가 포함되어 있다는 것입니다.state물건.첫 번째 스토어는foo모듈로 이동합니다.두 번째 저장소에서 동일한 작업을 수행하려고 하면 속성이 이미 존재함을 발견하고 오류를 기록합니다.

루트가state이 예시와 같이 오브젝트가 비어 있으면 삭제만 하면 됩니다.그러나 비어 있지 않은 경우 대신 함수로 변경하여 이 문제를 해결할 수 있습니다.

const config = {
  state () {
    return {
      /* state properties here */
    }
  },

  modules: {
    foo: {}
  }
}

이 동작은, E-메일과 같은 방법으로 동작합니다.data컴포넌트의 기능.

언급URL : https://stackoverflow.com/questions/59052646/vuex-state-field-foo-was-overridden-by-a-module-with-the-same-name-at-foo