如何使用全局变量在 astro 页面中动态渲染 vuejs 组件？

Question

我正在 Astro 上分几步开发一个表格。 为此，我使用 Vuejs 组件（每个步骤一个）。

每个步骤都可以通过一个按钮进行验证，该按钮允许 go 进入下一个步骤。 我试图创建一个全局变量，通过按钮在每一步递增。 根据此变量的值，应显示相应的组件。 当前变量的值由 function 更新，但 index.astro 中未考虑新值

全局变量：

export let newValue = 0
export function nextComponent(num){
    newValue = num  
}

我的 index.astro：

---
import Layout from "../layouts/Layout.astro";
import Vehicule from "../components/vehicule/vehicule.vue";
import Owner from "../components/vehicule/owner.vue";
import Informations from "../components/vehicule/informations.vue";
import Header from "../components/header.vue";

import {newValue} from "../assets/js/globalVariable.js"

---

<Layout title="Welcome to Astro.">
    <main>
        
        <Header client:load />
        {newValue === 0 && <Vehicule client:load />}
        {newValue === 1 && <Owner client:load />}
        {newValue === 2 && <Informations client:load />}
        
    </main>
</Layout>

Answer 1

最好的方法可能是将所有这些 Vue 组件移动到一个包装器 Vue 组件中，这样您就可以利用 Vue 处理交互的方式。

index.astro可能看起来像这样，带有一个水合的<Steps />组件：

---
import Layout from "../layouts/Layout.astro";
import Header from "../components/header.vue";
import Steps from "../components/vehicule/steps.vue";
---

<Layout title="Welcome to Astro.">
    <main>
        <Header client:load />
        <Steps client:load />
    </main>
</Layout>

然后，您将在这个单步管理器中使用车辆、所有者和信息组件。