Vuejs组件等待初始化

Question

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

• app.vue 引导代码
• foo.vue 在路由 /foo 上呈现的某个组件
• bar.vue 在路由 /bar 上呈现的某个组件

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

当进入 /foo 路由时，当组件挂载时，$store 还没有从设备存储中更新

所有组件如何确保在它们被挂载之前进行初始化？

- a--m

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>

- Marty

---

这非常有趣，尽管我认为我必须在观察状态的价值方面有创意，因为这些值是存在的，但可能没有更新... 应用程序状态具有默认值。 - a--m

在这种情况下，我会在存储中创建一个loaded变量，并在所有需要呈现应用程序的异步操作完成时更新它。 - Marty