vuex 스토어는 setTimeout 이후에만 사용할 수 있는 이유는 무엇입니까?

vuex 스토어는 setTimeout 이후에만 사용할 수 있는 이유는 무엇입니까?

vuex 스토어를 가져오는 lib가 있습니다.

import {store} from "./index"

그 밖에index다음과 같은 일정한 내보내기가 파일에 있습니다.

export const store = new Vuex.Store({ ...

내가 가져올 파일에서, 나는 가져오기 후에 상점에서 무언가를 사용하고 싶었지만,store정의되지 않았습니다.

내 스토어 액세스를 setTimeout으로 포장했다면 다음과 같습니다.

setTimeout(()=>{
  // use store normally now..
},0)

그건 효과가 있다.

왜죠? 저는 이것이 Vuex에만 국한된 것이 아니라고 생각하지만 왜 그런 일이 일어나는지 모르겠습니다.

이것은 아마도 순환 의존성의 경우일 것입니다.순환 종속성은 웹 팩에서 컴파일되지만 런타임에 버그가 발생합니다.

파일이 있다고 가정할 때A그리고.B그리고 디프 체인은 마치.A -> B -> A그 때에B가져오려고 합니다.A아직 할 필요가 없습니다.export내용물(왜냐하면)import그렇지 않은 문 앞에 문이 표시됩니다.import진술).

그렇게import default ./A부터B즉시 돌아오다.undefined.

그래서 둘 중 하나: 만들기B다음으로 호출되는 함수를 내보냅니다.A내보내기를 호출하거나 모듈을 만듭니다.C그 둘 다A그리고.B어떻게든 순환 의존성을 해결하는 데 의존합니다.

물건을 잘못 싣거나 설정이 좀 잘못된 것 같습니다.

스토어를 Vue 인스턴스에 삽입해보고 모든 하위 구성 요소에서 사용할 수 있다고 가정하면 됩니다.

main.js

import {store} from "./index"

new Vue({ 
  el: '#app',
  store,
  render: h => h(App)
})

이제 모든 하위 구성 요소에서 다음을 통해 스토어에 액세스할 수 있습니다.this.$store

언급URL : https://stackoverflow.com/questions/49238467/why-is-vuex-store-only-available-after-settimeout