Question

我遇到了一个问题，所以我在NuxtJS（vuejs）中使用这样的默认布局

<template>
  <div id="app">
    <Loader @animation:complete = 'loader'/>
    <Header/>
    <nuxt :title = 'title'/>
    <Footer/>
    <BgDecor/>
  </div>
</template>

<script>
import { gsap } from "gsap/dist/gsap";

import Loader from "@/layouts/parts/Loader";
import Header from "@/layouts/parts/Header";
import Footer from "@/layouts/parts/Footer";
import BgDecor from "@/layouts/parts/BgDecor";

export default {
  data() {
    return {
      loaderDone: null,
    };
  },
  components: {
    Loader,
    Header,
    Footer,
    BgDecor,
  },
  head() {
    return {
      titleTemplate: "%s - Product Designer UI/UX Designer Strategist",
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "Artistic Director, Web / Motion Designer, FrontEnd Developer for over 10 years, specializing in visual communication and web design",
        },
        {
          hid: "keywords",
          name: "keywords",
          content:
            "Product Design, UI, UX, Designer, UI Designer, UX Designer, FrontEnd Developer",
        },
      ],
    };
  },
  methods: {
    loader(e) {
      console.log("yesssssss");
      this.loaderDone = "yup";
    },
  },
  computed: {
    title() {
      return this.loaderDone;
    },
  },
};
</script>

<style>
</style>

我的问题是我在Nuxt中有问题，但在组件nuxt内的页面中却没有是的，我知道这很复杂，但是我想在加载程序完成后将$ emit传递到索引页面或其他页面以知道加载程序已完成如果我每次回到页面索引时都将加载器直接放在索引中，那么我再次获得加载器时，我只想在启动网站时就拥有它因此，在开发工具中，我在索引的nuxt父级中包含yup，但是如果我再次使用props，则似乎只是为了获取信息就完成了很多工作，可以启动其他动画

如果有人有想法，谢谢:) 祝你晚上愉快

Answer 1

您可以在vuex商店中做到这一点。

您的商店可能看起来像这样

const store = new Vuex.Store({
  state: {
    loaderDone: false
  },
  mutations: {
    setLoadingDone (state) {
      state.loadingDone = true
    }
  }
})

在装载机中，您可以map the mutation，而在组件中，您可以map the state。

要设置完成标志，您可以在加载程序中执行此操作，以使用方法setLoadingDone()

// loader.vue
import { mapMutations } from 'vuex}
export default {
  // ...
  methods: {
    ...mapMutations(['setLoadingDone '])
  }
}

您的其他组件可以像这样获得此值

// other components
import { mapState } from 'vuex}
export default {
  // ...
  computed: {
    ...mapState(['loadingDone '])
  }
}

NuxtJS传递道具

1 个答案: