Wie Laden in vuex bevor Komponente rendert

Question

Ich verwende vuex, um eine Baumstruktur in der Statuseigenschaft zu speichern.

Die Daten werden mit einem Ajax-Aufruf abgerufen.

Das Problem ist, dass die Seite zu rendern Rendern verwaltet, bevor die Variable, die ich in der state-Eigenschaft habe, zu füllen.

d.h

// 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> 

ich gegoogelt habe, aber ich habe nicht etwas, das funktioniert gefunden. Hat sich jemand mit einem ähnlichen Problem beschäftigt?

Gibt es eine Möglichkeit, es zu tun?

Answer 1

Shop ein Verweis auf die geladene Karte Schlüssel im Inneren des vuex Zustand wie:

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

dann innerhalb der Mutation, die die Daten drücken Sie die Taste, um keysLoaded, die in der Komponente umgehen können Sie eine berechnete Eigenschaft verwenden, wie :

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

die ul machen nur, wenn showTree seine wahre:

<ul v-if="showTree">