NuxtJS 传递道具

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 中有 yup 但不在组件 nuxt 内的页面内 是的，我知道这很复杂，但我想在我的加载器完成后得到一个 $emit 到我的索引页面或其他页面以知道我的加载器已经完成 如果我每次回到页面索引时都将加载器直接放入索引中，我会再次获得加载器，我希望在启动网站时拥有它 所以在开发工具中，我在索引的 nuxt 父级中有是的，但是如果我再次使用道具，似乎需要做很多工作来获取我的加载器完成的信息，我可以开始我的其他动画

如果有人有想法谢谢:) 祝你有个愉快的夜晚

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 '])
  }
}