处理数据加载- Vue

Question

我正在将项目数据从Vuex加载到组件中。当我刷新页面时，它需要一两秒钟来加载数据，这会导致页面短暂中断：

​

​

有没有什么方法可以让我更优雅地处理这件事？即使只有一个白色屏幕也会看起来更好。

Answer 1

你可以简单地为它添加一个加载器。现在，许多网站都会显示漂亮的加载图标或徽标或消息，当数据为loading.For时，检查数据是否正在加载，然后显示加载程序，否则在该页面中显示数据。

让我们举一个小例子来说明我的意思。

​

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

您可以在该页面上添加预加载器，该预加载器会在显示实际页面之前加载几秒钟

Answer 3

对于exapmle，您可以这样做：

首先创建一个名为example 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。您需要在您的Vuex store.The loading属性初始设置为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
   }
}