javascript - Vuejs组件等待初始化

Question

为了提供一些背景信息，我有一个 vuejs应用程序使用 vue-router和 vuex .

• app.vue Bootstrap 代码
• foo.vue 在路由 /foo
上渲染的一些组件
• bar.vue 在路由 /bar
上渲染的一些组件

当应用程序启动时，我需要同步从设备存储中读取的状态。由于这是一个异步操作，它被包装在 vue-action 上并在 app.vue 上调用。

在安装组件时进入 /foo 路径时，$store 尚未从设备存储中更新

所有组件如何确保在挂载之前完成初始化？

Answer 1

我在这些情况下所做的是使用 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>