在 nuxt3 组件之间共享补间

Question

我在 nuxt3 应用程序的 index.vue 中有一个补间。我需要在整个应用程序中共享这个补间，以便在scrollTrigger 的containerAnimation 中使用它。我该怎么做？

这是我的index.vue代码

<script setup>
import { onMounted, provide } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

onMounted(() => {
  const sections = gsap.utils.toArray(".scroll-container .section");
  const sectionsContainer = document.querySelector(".scroll-container");
  const scrollTween = gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: sectionsContainer,
      pin: true,
      start: "top top",
      scrub: 4.5,
      end: () => "+=" + (sectionsContainer.offsetWidth - innerWidth),
    },
  });
});
</script>