如何在x-data外部管理Alpine.js组件的状态并调用其方法

• 代码中定义的toastr()函数每次调用都会生成全新的对象，和页面上x-data="toastr()"绑定的实际组件实例是完全独立的两个对象，修改前者不会对页面上的组件产生任何影响。
• 原代码的toastr()函数存在语法错误：函数内部的属性和方法需要包裹在return {}中返回，否则逻辑无法生效。

方案1：使用Alpine.store全局状态（官方推荐） #

这是Alpine.js原生支持的全局状态共享方案，专门用于跨组件、外部调用类的场景，无需额外配置：

<!-- 组件代码 -->
<div x-data x-show="$store.toastr.isOpen">
    <span x-text="$store.toastr.title"></span>
    <span x-text="$store.toastr.body"></span>
</div>

<script>
// 全局注册toastr状态仓库
Alpine.store('toastr', {
    isOpen: false,
    title: '',
    body: '',
    open() {
        this.isOpen = true
    },
    set(data) {
        this.title = data.title
        this.body = data.body
    }
})
</script>

外部直接操作全局store即可触发组件更新：

<script>
    Alpine.store('toastr').set({
        'title': "Hello",
        'body': "Some body",
    })
    Alpine.store('toastr').open()
</script>

方案2：将组件实例暴露到全局作用域 #

如果不想使用全局store，可以在组件初始化时把实例挂载到window全局对象上：

<!-- 组件代码，x-init钩子将当前实例挂载到window -->
<div x-data="toastr()" x-init="window.toastrInstance = this" x-show="isOpen">
    <span x-text="title"></span>
    <span x-text="body"></span>
</div>

<script>
    function toastr() {
        // 补充原代码缺失的return
        return {
            isOpen: false,
            title: '',
            body: '',
            open() {
                this.isOpen = true
            },
            set(data) {
                this.title = data.title
                this.body = data.body
            }
        }
    }
</script>

外部直接调用全局挂载的实例即可：

<script>
    // 注意要确保组件已经完成初始化后再调用，建议放在页面底部或者DOMContentLoaded回调中
    toastrInstance.set({
        'title': "Hello",
        'body': "Some body",
    })
    toastrInstance.open()
</script>

方案3：通过DOM节点获取组件实例 #

给组件添加唯一ID，通过Alpine内置API直接获取绑定的实例：

<!-- 给组件添加唯一ID -->
<div id="my-toastr" x-data="toastr()" x-show="isOpen">
    <span x-text="title"></span>
    <span x-text="body"></span>
</div>

外部调用代码：

<script>
    const toastrInstance = Alpine.find('#my-toastr')
    toastrInstance.set({
        'title': "Hello",
        'body': "Some body",
    })
    toastrInstance.open()
</script>

内容的提问来源于stack exchange，提问作者Nate