Динамика AlpineJS - Переиспользуемые данные

Если вы обнаружите, что дублируете содержимое x-data или считаете синтаксис строки многословным, вы можете извлечь объект x-data в специальный компонент с помощью Alpine.data.

<div x-data="dropdown">
  <button @click="toggle">Переключить содержимое</button>

  <div x-show="open">Содержимое...</div>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('dropdown', () => ({
      open: false,

      toggle() {
        this.open = !this.open;
      },
    }));
  });
</script>