代码笔记

把Alpinejs实例曝露到外部,控制台访问Alpinejs实例

<div x-data="dropdown">
    <button @click="toggle">...</button>
 
    <div x-show="open">...</div>
</div>
 
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            init(){
                window.AlpApp = this
            },
            open: false,
 
            toggle() {
                this.open = ! this.open
            }
        }))
    })
</script>

这样页面里就可以打开控制台方便调试了console.log(window.AlpApp.$data.open)

不过拿到的是proxy,也可以这样获取

document.querySelectorAll('[x-data]').forEach(el => {
  console.log(el.__x.getUnobservedData());
});