Компоненты Vuejs ждут инициализации

Question

Компоненты Vuejs ждут инициализации

Чтобы дать некоторый контекст, у меня есть приложениеvuejs , использующееvue-router иvuex .

app.vue загрузочный код

foo.vue некоторый компонент, который отображается на маршруте /foo

bar.vue некоторый компонент, который отображается на маршруте /bar

При запуске приложения мне нужно синхронизировать Чтение состояния из хранилища устройства. Поскольку это асинхронная операция, она оборачивается на vue-action и вызывается на app.vue.

При входе в /foo маршрут к моменту монтирования компонента $store еще не обновлен из хранилища устройства

Как все компоненты могут гарантировать, что инициализация произведена до их монтирования?

565 1

javascript vue-component vue.js vue-router

1 ответ:

Comments

Ничего не найдено.

Marty · Accepted Answer · 2017-11-17 01:07:37

Что я делаю в этих ситуациях, так это использую 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>