앱을 로드하기 전에 vuex 스토어에 데이터를 로드합니다. 이 작업을 수행하려면 어떻게 해야 합니까?

앱을 로드하기 전에 vuex 스토어에 데이터를 로드합니다. 이 작업을 수행하려면 어떻게 해야 합니까?

매장 안에 있는 저희 가게로 디스패치 콜을 하고 있습니다.created의 훅.App.vue아이 컴포넌트에서 나는 그것을 요청한다.getter문제는 앱을 로드할 때 데이터가 스토어에 저장되기 전에 하위 컴포넌트가 로드되어 표시되지 않는 것입니다.저는 로그가 기록된 콘솔과 첫 번째 로그가 스토어의 소비자인 자 컴포넌트라는 사실로 확신하고 있습니다.어떻게 보장하면dispatch다른 컴포넌트를 로드하기 전에 사이트 전체에 필요한 것은 무엇입니까?

---

// App.vue

created() {
       this.$store.dispatch(this.$mts.diseases.DISEASES_LIST) //note I tried with async/await to no avail
    ...

//자 컴포넌트

created() {
      this.diseases = this.$store.getters.diseasesList
    ...

앞서 설명한 바와 같이 App.vue 내의 코드를 비동기식으로 하려고 했지만, 먼저 로딩이 되지 않아 도움이 되지 않았습니다.

속성을 하위 구성요소의 계산된 내부에 넣어야 합니다. 그러면 값이 스토어에 존재하는 즉시 속성이 채워집니다.

computed: {
    diseases () {
        return this.$store.getters.diseasesList
    }
}

VueX 문서 참조

컴포넌트를 로드하기 전에 데이터를 사용할 수 있을 때까지 기다리려면v-if 문서를 참조하다

<your-component v-if="$store.getters.diseasesList">
    ...
</your-component>

Nuxt.js(https://nuxtjs.org/)를 이용하는 것을 검토해 주십시오.fetch그리고.asyncData즉, 컴포넌트가 반환된 약속을 해결하기 전에 해당 컴포넌트가 렌더링되지 않도록 즉시 지원합니다.

언급URL : https://stackoverflow.com/questions/57094918/loading-data-into-vuex-store-before-app-loads-how-to-accomplish-this