데이터 로드 처리 - Vue

데이터 로드 처리 - Vue

Vuex에서 컴포넌트로 아이템 데이터를 로드하고 있습니다.페이지를 새로 고칠 때 데이터를 로드하는 데 1~2초가 소요되므로 페이지가 잠시 중단됩니다.

좀 더 우아하게 대처할 수 있는 방법이 없을까요?흰색 화면이라도 더 보기 좋을 것 같아요.

간단하게 로더를 추가할 수 있습니다.오늘날 많은 사이트에서는 데이터가 로드될 때 아이콘, 로고 또는 메시지를 아름답게 로드하고 있습니다.이 체크에서는 데이터가 로드되면 show loaders, 그렇지 않으면 해당 페이지에 데이터가 표시됩니다.

내 말의 의미를 작은 예로 들어보자.

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>

실제 페이지를 표시하기 전에 몇 초 동안 로드되는 프리 로더를 해당 페이지에 추가할 수 있습니다.

예시로 다음과 같이 할 수 있습니다.

먼저 예를 들어 다음과 같은 컴포넌트를 만듭니다.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-ifVuex 스토어의 상태에 새 속성을 추가해야 합니다.그loading처음에 propertie가 true로 되어 있습니다.모든 것을 로딩한 후 방금 설정해 놓은loadingfalse가 되고 컴포넌트가 사라집니다.

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

언급URL : https://stackoverflow.com/questions/61360511/handle-data-load-vue