В прошлый раз, когда мы делали to-do на Alpine.js, меня очень сильно расстроило, что, хоть я и могу создавать вложенные компоненты, я не могу получать данные из родителя. Через какую-нибудь переменную, $parent, например.
Поэтому мне пришлось запихивать все яйца в одну корзину. Свойства и методы, отвечающие за добавление новых задач, перемешались со всеми остальными. Я хотел выделить отдельный компонент, но необходимость доступа к массиву todos меня ограничивала.
Если вы подумали, что это не очень хорошо, то вы не правы. На самом деле, это ужасно.
Всё, расходимся? Нет. Я еще раз полистал документацию и вспомнил про магическое свойство $dispatch. Ну, конечно… однопоточная связь, проброс событий. Ну давайте попробуем. А потом еще переосмыслим всё с глобальным store.
Проброс событий
Для начала откроем наш код.
Первое, что надо сделать, – превратить обертку над input в компонент и перенести в него inputValue.
<div x-data="{ inputValue: '' }" class="add-todo">
<input type="text" x-model="inputValue" placeholder="Новая задача" />
<button @click="addTodo()">Добавить</button>
</div>Естественно, наш новый компонент понятия не имеет, что такое addTodo(). Ему и не надо. Вместо этого мы будем диспатчить CustomEvent.
<button @click="$dispatch('add', inputValue)">Добавить</button>Мы диспатчим событие add и передаем ему значение inputValue как payload (в спецификации он называется detail).
Теперь это событие надо принять. Примет его наш корневой компонент. И вызовет addTodo() с нашим inputValue.
<div x-data="todos()" x-init="fetchTodos()" @add="addTodo($event.detail)" class="app">
...
</div>Осталось немного поправить addTodo() и готово.
addTodo: function (inputValue) {
if (!inputValue) {
return;
}
this.todos.push({
id: Date.now(),
title: inputValue,
completed: false,
});
}Всё круто, вот только теперь inputValue не отчищается. В этой функции, естественно, мы это сделать не можем. Это нужно делать внутри компонента.
<button @click="$dispatch('add', inputValue); inputValue = ''">Добавить</button>А можно?.. Нет. $dispatch доступен только в разметке. В принципе, так тоже терпимо. Если бы нам нужно было делать больше логики, мы могли бы вместо inputValue = '' вызвать конкретную функцию, которую бы определили в <script>.
А можно?.. Ну конечно можно! Несмотря на то, что $dispatch недоступен нам, в отличие от остальных магических свойств, в this компонента, мы можем использовать хитрость и передать его как параметр функции.
Для удобства выделим функцию в <script> для нашего внутреннего компонента.
function add() {
return {
inputValue: '',
dispatchAdd: function ($dispatch) {
$dispatch('add', this.inputValue);
this.inputValue = '';
}
}
};Template теперь выглядит так.
<div x-data="add()" class="add-todo">
<input type="text" x-model="inputValue" placeholder="Новая задача" />
<button @click="dispatchAdd($dispatch)">Добавить</button>
</div>У нас получилось перенести inputValue в отдельный компонент. Неплохо, но хотелось бы и addTodo() перенести. Как сделать это?
На самом деле, элементарно. Просто передайте в detail вместо inputValue уже готовый объект to-do и запушьте его в todos.
...А знаете что? Попробуйте сами. Сделаем статью более обучающей :) И не забудьте отчистить inputValue после. Вот как я это сделал.
Глобальное хранилище данных
Вы, наверное, заметили, что в заголовке заявлена еще одна тема. Всё, что мы делали выше, – это, конечно, круто. Но масштабируемость сильно хромает. И рано или поздно придет мысль: "Было бы круто все данные хранить в отдельном store, как это делает Redux/Mobx/Vuex и т.п. И обращаться уже к нему, не прокидывая ничего вверх без надобности."
Знакомьтесь, Spruce. 2 килобайта чистой годноты.
Вернемся к оригинальному коду и сделаем все по новому. Для начала подключим, а разберемся по ходу.
<head>
...
<script src="https://cdn.jsdelivr.net/gh/ryangjchandler/spruce@0.6.0/dist/spruce.umd.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"></script>
</head>До Alpine.js и удалить у Alpine defer. Такую цену придется заплатить. Довольно дешево, я беру.
Теперь подписываем наш корневой компонент к store. Данные внутри компонента нам больше не понадобятся.
<div x-data x-subscribe class="app">
...
</div>Spruce дает нам одноименную переменную в window. Чтобы создать store, используется Spruce.store(<название>, <объект>).
Spruce.store('data', {
todos: [],
inputValue: '',
});*store может быть неограниченное количество.
Теперь, чтобы дотянутся до значений, можно использовать $store.data.todos.
Сделаем разделение по Vue Options API – данные будем хранить в data, а методы – в methods.
Spruce.store('methods', {
toggleTodo: (id) => {
const todo = $store.data.todos.find((todo) => todo.id === id);
if (todo != null) {
todo.completed = !todo.completed;
}
},
addTodo: function () {
if (!$store.data.inputValue) {
return;
}
$store.data.todos.push({
id: Date.now(),
title: $store.data.inputValue,
completed: false,
});
$store.data.inputValue = '';
},
deleteTodo: function (id) {
$store.data.todos = $store.data.todos.filter((todo) => todo.id !== id);
},
});Слышите этот звук? Это скрипят зубы у евангелистов иммутабельности. Здесь её нет, она и не нужна, так как масштабы не те. Иммутабельность сложнее, требует больше написанного кода и очень редко когда приносит реальную пользу. Сложность точно не уровня Alpine.
Ну и, собственно, наш template.
<div x-data x-subscribe class="app">
<h1>Планы на сегодня:</h1>
<ul>
<template x-for="todo in $store.data.todos" :key="todo.id">
<li @click="$store.methods.toggleTodo(todo.id)" :class="{'completed': todo.completed}">
<span x-text="todo.title" class="title"></span>
<span @click="$store.methods.deleteTodo(todo.id)" class="delete-todo">×</span>
</li>
</template>
</ul>
<div class="add-todo">
<input type="text" x-model="$store.data.inputValue" placeholder="Новая задача" />
<button @click="$store.methods.addTodo()">Добавить</button>
</div>
</div>Последний штрих – нужно получить данные с API. В Spruce для этого есть удобный метод. Если Spruce.on(<событие>, <колбэк>) предназначен для навешивания событий, то Spruce.once(<событие>, <колбэк>) как раз для выполнения какого-то действия один раз. Событие init – то, что мы ищем.
Spruce.once('init', async ({ store }) => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const data = await response.json();
store.data.todos = data.slice(0, 10);
});Mission accomplished.
Можно легко превратить наш Options API в "Composition API", где каждый store отвечает за конкретную функциональность. Делите ваши данные, как заблагорассудится.
При этом нам не нужны внутренние компоненты и проброс данных через события, так как все компоненты имеют равный доступ к $store. Актуально на фоне борьбы с архитектурами master/slave :)
Полезные ссылки:
*Photo by Jakub Kapusnak on Unsplash