Состояние

Состояние (данные JavaScript, изменения которых Alpine отслеживает) лежит в основе всего, что вы делаете в Alpine. Вы можете предоставить локальные данные для фрагмента HTML или сделать их глобально доступными для использования в любом месте страницы, используя x-data или Alpine.store() соответственно.

Локальное состояние

Alpine позволяет вам объявлять состояние блока HTML в одном атрибуте x-data прямо в разметке.

Вот базовый пример:

<div x-data="{ open: false }">...</div>

Теперь любой другой синтаксис Alpine в этом элементе или внутри него сможет получить доступ к open. И, как вы могли догадаться, когда open меняется по какой-либо причине, всё, что от этого зависит, будет реагировать автоматически.

Подробнее об x-data

Вложенные данные

Данные в Alpine могут быть вложенными. Например, если у вас есть два элемента с атрибутом x-data (один внутри другого), вы можете получить доступ к данным родительского элемента изнутри дочернего элемента.

<div x-data="{ open: false }">
  <div x-data="{ label: 'Контент:' }">
    <span x-text="label"></span>
    <span x-show="open"></span>
  </div>
</div>

Это похоже на определение области действия в самом JavaScript (код внутри функции может обращаться к переменным, объявленным вне этой функции).

Как вы уже догадались, если у дочернего элемента есть свойство данных, совпадающее с именем родительского свойства, дочернее свойство будет иметь приоритет.

Одноэлементные данные

Хотя некоторым это может показаться очевидным, стоит отметить, что данные Alpine можно использовать в одном и том же элементе. Например:

<button x-data="{ label: 'Нажмите здесь' }" x-text="label"></button>

Alpine без данных

Иногда вам может потребоваться использовать функциональность Alpine, но вам не нужны реактивные данные. В этих случаях вы можете полностью отказаться от передачи выражения в x-data. Например:

<button x-data @click="alert('Нажато!')">Нажмите</button>

Повторно используемые данные

При работе с Alpine может возникнуть необходимость повторного использования фрагмента данных и/или соответствующего шаблона.

Если вы используете серверную среду, такую как Rails или Laravel, Alpine сначала рекомендует вам извлечь весь блок HTML в часть шаблона или включить его.

Если по какой-то причине это не идеально для вас или вы не используете внутреннюю среду шаблонов, Alpine позволяет вам глобально зарегистрировать и повторно использовать часть данных компонента, используя Alpine.data(...) .

Alpine.data('dropdown', () => ({
  open: false,

  toggle() {
    this.open = !this.open;
  },
}));

Теперь, когда вы зарегистрировали данные «dropdown», вы можете использовать их в своей разметке в любом количестве мест:

<div x-data="dropdown">
  <button @click="toggle">Развернуть</button>

  <span x-show="open">Контент...</span>
</div>

<div x-data="dropdown">
  <button @click="toggle">Развернуть</button>

  <span x-show="open">Некоторый другой контент...</span>
</div>

Подробнее об Alpine.data()

Глобальное состояние

Если вы хотите сделать некоторые данные доступными для каждого компонента на странице, вы можете сделать это, используя функцию «глобального хранилища» Alpine.

Вы можете зарегистрировать хранилище, используя Alpine.store(...), и ссылаться на него с помощью магического метода $store().

Давайте посмотрим на простой пример. Сначала зарегистрируем хранилище глобально:

Alpine.store('tabs', {
  current: 'first',

  items: ['first', 'second', 'third'],
});

Теперь мы можем получить доступ к его данным или изменить их из любого места на нашей странице:

<div x-data>
  <template x-for="tab in $store.tabs.items"> ... </template>
</div>

<div x-data>
  <button @click="$store.tabs.current = 'first'">Первая вкладка</button>
  <button @click="$store.tabs.current = 'second'">Вторая вкладка</button>
  <button @click="$store.tabs.current = 'third'">Третья вкладка</button>
</div>

Подробнее об Alpine.store()

Проверка знаний

Какой вариант использования x-data правильный?

<button
 x-data="{ label: 'Нажмите здесь' }"
 x-text="label"
></button>

<div x-data="{ label: 'Нажмите здесь' }">...</div>
<button x-text="label"></button>

Ни один из представленных