Vue.js组件等待初始化

Question

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

• app.vue 引导代码
• foo.vue 在路线上渲染的某些组件 /foo
• bar.vue 在路线上渲染的某些组件 /bar

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

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

所有组件如何确保在安装之前进行初始化？

Answer 1

在这种情况下，我要做的是仅在您期望存在的数据已填充时，v-if在根<router-view>元素上使用a 来渲染，例如

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