Alpine 无法访问使用 data() 设置的变量

Question

我正在使用 Astro 与 Alpine 集成，渲染设置为静态。

我正在尝试获取数据并根据响应渲染一些 html 客户端。

统计.ts

const FUNCTIONS_BASE_URL = import.meta.env.PUBLIC_AZURE_FUNCTIONS

interface Statistic {
    metrics: number[];
    dimensions: string[];
}

export interface GlobalMetrics {
    statistics: Statistic[];
}

export const getStatistics = async (): Promise<GlobalMetrics> => {
    const response = await fetch(
        `${FUNCTIONS_BASE_URL}/api/stats`
    );
    const data: Statistic[] = await response.json();

    return { statistics: data }
}

Astro 页面

---
import Layout from "../layouts/Layout.astro";
---

<script>
    import { getStatistics } from "../scripts/stats";
    import type { GlobalMetrics } from "../scripts/stats";
    const statistics = await getStatistics();

    document.addEventListener("alpine:init", () => {
        window.Alpine.data("stats", () => ({
            metrics: statistics as GlobalMetrics,
            async init() {
                console.log(this.metrics);
            },
        }));
    });
</script>

<Layout>
    <div x-data="stats"></div>
</Layout>

这会导致

ReferenceError: stats is not defined

Answer 1

我不确定错误是什么，如果有人知道为什么会发生这种情况，我会很乐意接受这个答案。

这个错误似乎源于 Astro 捆绑 javascript 的方式。我删除了

@astrojs/alpinejs

并刚刚安装了

alpinejs

并将其导入到我的脚本标签中，如下所示；

<script>
    import Alpine from "alpinejs";

    window.Alpine = Alpine;
    Alpine.data("stats", () => ({
    }));

    Alpine.start();
</script>

效果很好。