Vuejs组件等待初始化

Question

为了提供一些背景信息，我有一个 vuejs application using vue-router and vuex。

app.vueBootstrap代码
foo.vue 在路由上呈现的一些组件 /foo
bar.vue 在路由上呈现的一些组件 /bar

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

上调用

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

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

Answer 1

我在这些情况下所做的是在您的根 <router-view> 元素上使用 v-if 仅当您期望存在的数据已填充时才呈现，例如

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

Vuejs组件等待初始化

Vuejs components to wait for initialisation

javascript

vue.js

vue-router

vue-component