Question

我正在使用vuex在state属性中保存树结构。

使用ajax调用获取数据。

问题是页面设法在我在state属性中设置的变量填充之前进行渲染。

即

// 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状态内加载的地图键的引用，如：

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

然后在处理数据的变异内部将密钥推送到keysLoaded，在组件中，您可以使用计算属性，如：

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

仅当showTree为真时才渲染ul：

<ul v-if="showTree">

如何在组件呈现之前在vuex中填充商店

1 个答案: