使用 Nuxt 添加多个加载组件答案

【问题标题】：Add multiple loading components with Nuxt使用 Nuxt 添加多个加载组件
【发布时间】：2021-08-06 19:12:56
【问题描述】：

如何向 nuxt 添加多个加载组件并将其命名为：

对于来宾用户 this.$nuxt.$loading.guestLoader.start()
对于私人用户 this.$nuxt.$loading.privateLoader.start()

文档：https://nuxtjs.org/docs/2.x/features/loading#using-a-custom-loading-component。

有什么想法吗？

【问题讨论】：

@kissu。你好！我使用组合 api 而不是 vuex 制作了自己的加载功能
几乎一样吗？和加载栏有什么关系？

标签： vue.js nuxt.js

【解决方案1】：

更新

// useLoader.js
import { ref, computed } from '@nuxtjs/composition-api';

const state = ref({
  'app-guest-loader': false,
  'app-platform-loader': false
});

export function useLoader(context) {
  function start(loaderName) {
    state.value[loaderName] = true;
  }
  function stop(loaderName) {
    state.value[loaderName] = false;
  }

  const getOpenedLoaders = computed(() => {
    for (const [key, value] of Object.entries(state.value)) {
      if (value) { return key; }
    }
  });

  return {
    start,
    stop,
    getOpenedLoaders
  };
}

还有一个包装器AppLoader.vue

<template>
  <transition name="fade">
    <div v-if="getOpenedLoaders" class="app-loader">
      <component :is="getOpenedLoaders" />
    </div>
  </transition>
</template>

<script>
import AppGuestLoader from '@/components/appLoaders/AppGuestLoader';
import { useLoader } from '@/composition/useLoader';

export default {
  components: {
    AppGuestLoader
  },
  setup() {
    const { getOpenedLoaders, stop } = useLoader();

    setTimeout(() => {
      stop('app-guest-loader');
    }, 3000);

    return {
      getOpenedLoaders,
      stop
    };
  }
};
</script>

<style scoped lang="scss">
  .app-loader {
    height: 100vh;
    width: 100%;
    display: block;
    position: absolute;
    z-index: 9999;
    overflow: hidden;
    position: fixed;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 2s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
</style>

【讨论】：

【解决方案2】：

由于有一种方法可以将自己的组件传递给加载组件

export default {
  loading: '~/components/LoadingBar.vue'
}

您可以使组件的样式动态化，假设guests 为红色，private 为蓝色，并通过更改 vuex 状态在两者之间切换。

总结一下：

你的组件有一些默认的红色
你点击了一些授权或类似的东西
您进行 vuex 调用以更新状态，表明用户已通过身份验证
让组件的样式对 vuex 的变化做出反应
再次调用进度条
查看更新后的进度条样式已更改
如果他注销，样式将再次恢复为红色

这样的：

<div :class="[store.isAuthenticated ? 'blue-color' : 'red-color']"></div>

【讨论】：