Alpine.js：如何从外部文件中的函数访问 x 数据？

Question

我刚刚开始使用 Alpine.js，我了解基础知识，但在将函数移到内联脚本标记之外时应用它们时遇到困难。

例如，在index.html：

<div x-data="{ loading: false }"/>
  <button
    onClick="post()"
    :class="{ 'active': loading === true }"
  >
    Post Comment
  </button>
</div>

如果post()在main.ts：

const postComment = () => {
  this.loading = true;
};

window.postComment = postComment;

我怎样才能使它this不是未定义的？

我发现了很多函数保存在 中的示例index.html，但没有发现它们位于单独的文件中。

Answer 1

您需要将该方法添加到 AlpineJs 实例才能访问相同的范围。但是您可以使用扩展...运算符通过一些对象解构来做到这一点：

在页面中：

<div x-data="{
  isLoading: false,
  ...utils
}">
    // Your content
</div>

然后在您的外部脚本文件中：

const utils = {
  post(){
    this.isLoading = true
  }
}

window.utils = utils

这样做的好处是，您可以将加载指示器所需的所有内容放入此外部对象中，以便在您需要的任何地方用作 mixin。

这是一个工作示例：https ://codepen.io/stephenoldham/pen/BapvyYr

AlpineJs v3 更新：

如果您试图在最新版本的 AlpineJs 中实现相同的目标，您将需要使用数据指令：

在页面中：

<div x-data="utils">
    // Your content
</div>

然后在您的外部脚本文件中：

document.addEventListener('alpine:init', () => {
    Alpine.data('utils', () => ({
        isLoading: false,
        post(){
            this.isLoading = true

            setTimeout(() => {
                this.isLoading = false
            }, 3000)
        }
    }))
})

这是一个有效的示例： https://codepen.io/stephenoldham-the-vuer/pen/dyJEjRx ?editors=1100

文档中的进一步阅读涵盖了如何设置初始值等： https: //alpinejs.dev/globals/alpine-data