구성 요소가 렌더링하기 전에 vuex에 저장소를 채우는 방법

구성 요소가 렌더링하기 전에 vuex에 저장소를 채우는 방법

vuex를 사용하여 상태 속성에 트리 구조를 저장하고 있습니다.

데이터는 Ajax 콜에 의해 취득됩니다.

문제는 상태 속성에 있는 변수가 채워지기 전에 페이지가 렌더링할 수 있다는 것입니다.

예

// sth.ts file
state: {
    map: {}
},
...
actions: {
    getData({ commit }){
        axios.get(...).then(... populate map ...).catch(...)
    }
}


// sthelse.vue file
<template>
<div>
<h1>Tree structure</h1>
<ul >
    <item v-for="child in map[root]"
             :key="child.id"
             :name="child.name"
             :children="child.Children">
    </item>
</ul>
</div>
</template>

구글을 검색해 봤지만 제대로 되는 것을 찾지 못했어요.비슷한 문제를 해결한 사람이 있나요?

할 수 있는 방법이 있을까요?

로드된 맵 키에 대한 참조를 다음과 같이 vuex 상태 내에 저장합니다.

state: {
    map: {},
    keysLoaded: []
}

그리고 데이터를 처리하는 변환 내부에서 키를 눌러서keysLoaded컴포넌트에서는 다음과 같은 계산 속성을 사용할 수 있습니다.

showTree () {
    return this.$store.state.keysLoaded.includes(this.root)
}

showTree가 true인 경우에만 ul을 렌더링합니다.

<ul v-if="showTree">

언급URL : https://stackoverflow.com/questions/45713401/how-to-populate-store-in-vuex-before-component-renders