コンポーネントをレンダリングする前にvuexにストアを設定する方法

Question

vuexを使用して、stateプロパティにツリー構造を保存しています。

データは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> 

私はGoogleで検索しているが、私は働く何かを発見していません。 誰も同じような問題を扱っていますか？

方法はありますか？

Answer 1

ストアのようなvuex状態内部のロードされたマップのキーへの参照：データはkeysLoadedにキーを押して扱う突然変異内部次に

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

、あなたのコンポーネントにあなたのような計算されたプロパティを使用することができます：

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

ULをレンダリングするだけshowTree場合、その真：

<ul v-if="showTree">