为了提供一些背景信息,我有一个 vuejs应用程序使用 vue-router和 vuex .
app.vue
Bootstrap 代码foo.vue
在路由/foo
上渲染的一些组件
bar.vue
在路由/bar
上渲染的一些组件
当应用程序启动时,我需要同步从设备存储中读取的状态。由于这是一个异步操作,它被包装在 vue-action
上并在 app.vue
上调用。
在安装组件时进入 /foo
路径时,$store
尚未从设备存储中更新
所有组件如何确保在挂载之前完成初始化?
最佳答案
我在这些情况下所做的是使用 v-if
在你的根上 <router-view>
仅当您期望存在的数据已填充时才呈现的元素,例如
<script>
export default {
computed: {
hasLoadedData() {
// Or whatever criteria you decide on to represent that the
// app state has finished loading.
return this.$store.state.something !== null;
}
}
}
</script>
<template>
<div id="app">
<router-view v-if="hasLoadedData" />
<p v-else>Loading...</p>
</div>
</template>
关于javascript - Vuejs组件等待初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47340500/