javascript - 处理数据加载 - Vue

Question

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

有没有办法让我更优雅地处理这个问题？即使只是一个白色的屏幕也会更好看。

标签： javascriptvue.jsvuex

Answer 1

例如，您可以这样做：

您首先创建一个名为例如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 商店中为您的状态添加一个新属性。该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
   }
}