Обработка данных загрузки - Vue

Question

Я загружаю данные элемента из Vuex в компонент. Когда я обновляю sh страницу, ей требуется секунда или две для загрузки данных, что приводит к краткому разрыву страницы:

Есть ли Как я могу справиться с этим более изящно? Даже просто белый экран выглядел бы лучше.

Answer 1

Просто вы можете добавить загрузчик для этого. В наши дни многие сайты показывают красивые значки загрузки, логотипы или сообщения при загрузке данных. Для проверки загрузки данных покажите загрузчикам, пока не покажите данные на этой странице.

Давайте рассмотрим небольшой пример того, что я загружаю. значит.

Vue.component('loading-screen', {
  template: '<div id="loading">Loading...</div>'
})

new Vue({
  el: '#app',
  data: {
    isLoading: true
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
})

body
  margin 0

#loading
  background-color #63ab97
  color white
  font-size 32px
  padding-top 10vh
  height 100vh
  text-align center

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <loading-screen v-if="isLoading"></loading-screen>
  <h1 v-else>Hello world!</h1>
</div>

Answer 2

Вы можете сделать это, например, следующим образом:

Сначала вы создаете компонент с именем, например, loader

//loader.vue

<template>
   <div class="loader">
      <p>Loading...</p>
   </div>
</template>
<style scoped>
.loader {
   width: 100vw;
   height: 100vh;
   background: white;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1000000;
}
</style>

Теперь вам нужно импортировать загрузчик на ту страницу, где вы нужно это. Затем вы добавляете v-if на него. Вам нужно будет добавить новое свойство ie в ваше состояние в вашем магазине Vuex. Свойство loading свойство ie изначально имеет значение true. После того, как вы загрузили все, вы просто устанавливаете loading в false и компонент исчезает.

<template>
   <div>
      <loader v-if="$store.state.loading"></loader>
   </div>
</template>
import loader from "path/to/loader";
export default {
   components: {
      loader: loader
   }
}

Answer 3

Вы можете добавить на эту страницу предварительный загрузчик, который загружается за несколько секунд до отображения текущей страницы