Globals

---

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)

---