Показывать счетчик (индикатор предварительной загрузки / загрузки) при изменении страницы и скрывать, когда все ресурсы загружены в Vue Gridsome - PullRequest
Новая
       54

Показывать счетчик (индикатор предварительной загрузки / загрузки) при изменении страницы и скрывать, когда все ресурсы загружены в Vue Gridsome

0 голосов
/ 06 августа 2020

Я использую Gridsome (Vue stati c генератор сайтов с Vue Router), и я создал предварительный загрузчик в index. html, это простой div, который охватывает все . В index. html Я также добавил этот код JS, чтобы скрыть предварительный загрузчик, когда все загружается 

window.onload = function() {
  document.getElementById('preloader').style.display = 'none';
};

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

Я попытался добавить это к моему Layout компоненту beforeDestroy(), чтобы снова показать предварительный загрузчик 

beforeDestroy() {
  this.preloader.style.display = 'block';
}

, который показывает его успешно при изменении маршрута, но затем, если я добавлю скрытый лог c в mounted() вот так 

mounted() {
  this.preloader.style.display = 'none';
}

, прелоадер никогда не будет отображаться.

Мне не удалось найти никаких ресурсов о все, что я могу найти, это индикаторы загрузки для asyn c вызовов, например axios или fetch. Раньше я создавал предварительные загрузчики в файлах stati c HTML, но никогда в SPA. Может кто-нибудь порадовать меня sh в правильном направлении? Даже поиск в Google по ключевым словам поможет

1 Ответ

1 голос
/ 17 августа 2020

вы можете использовать vuex с этим случаем.

сначала добавьте свое состояние src/main.js

import DefaultLayout from "~/layouts/Default.vue";
import Vuex from "vuex";

export default function(Vue, { appOptions }) {
  Vue.component("Layout", DefaultLayout);
  Vue.use(Vuex);

  appOptions.store = new Vuex.Store({
    state: {
      loading: false,
    },
    mutations: {
      on(state) {
        state.loading = true;
      },
      off(state) {
        state.loading = false;
      },
    },
  });
}

второе, добавьте счетчик в ./src/layouts/Default.vue

<template>
  <div class="layout">
    // add your spinner here or another
    <div v-if="$store.state.loading">loading</div>
    <slot />
  </div>
</template>

наконец, добавьте кодовые страницы фиксации, шаблон или компоненты. как показано ниже. 

<script>
export default {
  created() {
    // commit("on") first
    this.$store.commit("on");

    // commit("off") last, after fetch data or more.
    this.$store.commit("off");
  },
};
</script>
...