Alpine.data: <div x-data="dropdown"> <!-- ... --> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('dropdown', () => ({ open: false, toggle() { this.open = ! this.open } })) }) </script> data() — Alpine.js (alpinejs.dev) Alpine.store: <script> document.addEventListener('alpine:init', () => { Alpine.store('darkMode', { on: false, toggel() { this.on = ! this.on } }) }) </script> store() — Alpine.js (alpinejs.dev) Alpine.bind: Apline.bind()를 사용하면 x-bind 객체를 재사용가능하게 할 수 있다. <button x-bind="SomeButton"></button> <script> document.addEventListener('alpine:init', () => { Alpine.bind('SomeButton', () => ({ type: 'button', '@click'() { this.doSomething() }, ':disabled'() { return this.shouldDisable }, })) }) </script> bind() — Alpine.js (alpinejs.dev)