主页 / coding / 问题 / 78910094
Accepted
john
Asked: 2024-08-25 06:24:31 +0800 CST

AlpineJS异步数据加载

  • 772

我第一次研究 AlpineJS，并尝试将一些数据加载到x-data属性中。

我有类似的东西

<body x-data="data">
...

在我的 HTML 中。data我在其中存储了稍后使用的所有数据和函数（这是一个非常简单的 SPA）

document.addEventListener('alpine:init', () => {
  Alpine.data('data', () => ({
    foo: 1,
    bar: 2,
    ...
  }));
}

在所有变量同步之前，一切都运行正常，但现在我需要将从数据库异步获取的一些数据分配给一个变量。

我尝试了一些简单的事情

document.addEventListener('alpine:init', () => {
  Alpine.data('data', async () => ({
    foo: 1,
    bar: await getData(),
    ...
  }));
}

不幸的是，这不起作用。我得到了Uncaught ReferenceError: VARIABLE_NAME is not defined里面每个变量的data。

我该如何解决这个问题？有没有标准的方法来处理这种情况？

asynchronous

2 个回答

  1. Best Answer

    您可以在 init() 方法中分配异步数据，并从主数据（）函数中删除异步：

    document.addEventListener('alpine:init', () => {

    Alpine.data("data", () => ({

        foo: 1,
        bar: null,

        init: async function () {

            this.bar = await this.getData();
        },

        getData: async function () {

            return Promise.resolve("abc");
        }
    }));
});
    • 1

  2. 我接受了TUPKAP 的答案作为解决方案。查看 Alpine 的文档后，我在这里找到了该主题，如果有人需要更多详细信息，可以查看。

    在文档中，它的解释语法略有不同，对我来说，它应该是这样的

    Alpine.data('data', () => ({
        foo: 1,
        bar: null,
        async init () {
            this.bar = await getData();
        }
    })
};

    它们的作用完全相同，我只是发现这种语法更漂亮。

    • 0

相关问题