每当页面更改时显示微调器（preloader/loading 指示器）并在 Vue Gridsome 中加载所有资产时隐藏

Question

我正在使用 Gridsome（带有 Vue 路由器的 Vue 静态站点生成器）并且我在 index.html 中创建了一个预加载器，它是一个涵盖所有内容的简单 div。在 index.html 中，我还添加了这个 JS 代码以在所有内容加载时隐藏预加载器

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

这仅适用于初始加载，但在更改页面时我无法再次显示和隐藏它。

我已尝试将其添加到我的 Layout 组件的 beforeDestroy() 挂钩中以再次显示预加载器

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

当路由改变时显示成功，但是如果我在mounted()中添加隐藏逻辑，就像这样

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

预加载器从一开始就没有显示。

我找不到任何关于这种加载指示器的资源，我能找到的只有一个用于异步调用的资源，例如 axios 或 fetch。我之前在静态 HTML 文件中创建过预加载器，但从未在 SPA 中创建过。有人可以把我推向正确的方向吗？甚至谷歌搜索关键字也会有所帮助

Answer 1

你可以在这种情况下使用 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>

每当页面更改时显示微调器（preloader/loading 指示器）并在 Vue Gridsome 中加载所有资产时隐藏

Show spinner (preloader/loading indicator) whenever page changes and hide when all assets are loaded in Vue Gridsome

vue.js

vue-router

gridsome