Appearance
State-менеджер реализует принцип "Построителя" ("Builder"): к объекту состояния предлагается применить ряд методов для тех или иных задач (отметим сразу, что использование каждого из них - опционально, за исключением many() / one()):
api (path: string)
Принимает в аргументе относительный путь к получению данных с api. Присваивает результат в value объекта (с учётом template, т.е. структуры возвращаемых backend-ом данных, о котором далее). Примеры использования: 2, 3, 4, 5
template (template: string)
Форматирует приходящие с backend-а данные согласно шаблону, название которого указывается в аргументе. К примеру, из такого ответа:
json
{
"data": [
{
"id": "2",
"type": "Social_network",
"attributes": {
"id": 2,
"icon": "https://newadmin.kdlolymp.kz/media/icons/2/63998afe26033.svg",
"link": "https://www.instagram.com/kdlolymp/",
"position": 1
}
},
{
"id": "6",
"type": "Social_network",
"attributes": {
"id": 6,
"icon": "https://newadmin.kdlolymp.kz/media/icons/6/639994c659337.svg",
"link": "https://www.facebook.com/kdlolymp/",
"position": 5
}
}
],
"links": {
"self": {
"href": "http://newapi.kdlolymp.kz/v1/social-network?number=1"
},
"first": {
"href": "http://newapi.kdlolymp.kz/v1/social-network?number=1"
},
"last": {
"href": "http://newapi.kdlolymp.kz/v1/social-network?number=1"
}
},
"meta": {
"total-count": 5,
"page-count": 1,
"current-page": 1,
"per-page": 20
}
}можно оставить только следующее содержимое:
json
[
{
"id": 2,
"icon": "https://newadmin.kdlolymp.kz/media/icons/2/63998afe26033.svg",
"link": "https://www.instagram.com/kdlolymp/",
"position": 1
},
{
"id": 6,
"icon": "https://newadmin.kdlolymp.kz/media/icons/6/639994c659337.svg",
"link": "https://www.facebook.com/kdlolymp/",
"position": 5
}
], убрав лишние оболочки и meta-данные (тем не менее в других функциях state-менеджера meta-данные останутся доступными, об этом позже). Некоторые templat-ы для часто встречаемых структур возвращаемых с backend-а данных предоставлены самим state-менеджером (к примеру, уже продемонстрированный 'yii2-data-provider'), также можно настроить template и самостоятельно функцией setCustomTemplate. Примеры использования: 2, 3, 4, 5
join()
Может выполнять 2 возможные функции, в примере предыдущего раздела продемонстрированы обе: - можно передать в аргументе ссылку на другой объект state-менеджера (причём в том числе и другого хранилища, что и продемонстрировано в примере) - в результате, по изменению значения переданного по ссылке объекта, данные из api будут подгружаться заново. Ссылка на объект передается с помощью метода .ref(), применяемого к классу хранилища (это может быть this, либо импортируемый другой класс), и в аргументе ref-a название объекта в строке. В данном примере, посты заново подгружаются при изменении языка. Другие примеры использования: 2, 3, 4 - можно передать 2 аргумента: объект из текущего хранилища (уже не по ссылке) и название ключа (обёрнутое в строку) для сопоставления. В нашем примере:
ts
public post = state<IPost>({})
.join(this.items, "slug")значение для отдельного поста будет браться из массива постов (1-й аргумент) в случае, если оно будет найдено в массиве по slug-у (2-й аргумент). Лишь в противном случае оно будет загружено с api. Примеры использования: 2, 4
joinToQuery(queryTitle: string, queryValue: any)
Используется для добавления query-параметра к api-запросу. 1-й аргумент - название query-параметра; 2-й аргумент - его значение, которое может быть как статичным, так и браться из значения любого объекта любого из хранилищ (по ссылке). В примере предыдущего раздела в качестве query-параметра добавляется язык: вкупе с методом join() посты на нужном языке реактивно подгружаются при изменениях языка. Примеры использования: 2, 3, 4
auth (token: string)
Позволяет осуществить api-запрос с учётом Bearer-авторизации, по токену, который можно прописать как в виде статичной строки, так и - в виде .ref-ссылки на объект класса (к примеру, можно хранить токен авторизации отдельным объектом). Пример использования: 5
many() / one()
Необходимо для уточнения, будет ли значение являться массивом. Примеры использования: 1, 2, 3, 4, 5
map(f: Function)
Позволяет преобразовать массив полученных из api данных (аналогично одноименной JS-фукции). Примеры использования: 2, 3, 4
flat()
Работает аналогично одноименной JS-функции, разворачивает "массивы внутри массива" полученных с api данных. Пример использования: 3
sort(f: Function)
Аналогично одноименной JS-функции, осуществляет автоматически сортировку получаемых с api данных. В аргументе принимает функцию, осуществляющую логику сортировки. Пример использования: 4
filter()
Позволяет автоматически фильтровать получаемые с api данные. В аргументах принимает: - ссылку на класс, содержащий логику фильтрации (о его написании: ...якорная ссылка) - значение "emit-always" либо "emit-localy" (в виде строки). При первом из них при каждом изменении параметров фильтра запросы к api будут осуществляться заново. При emit-localy фильтрация будет осуществляться локально, над уже имеющимся массивом. Примеры использования: 2, 3
pagination(size: number, append: boolean)
Добавляет поддержку пагинации: к запросам на бэкэнд будет добавлен query-параметр page[size], равный 1-му указанному в функцию аргументу (size). page[number] изначально равен единице, затем изменяется при использований функций next и prev. Изменить названия query-параметров можно внутри функции createCustomTemplate. Пример использования: 6
watch (item: string, f: Function)
Также доступна функция watch (item: string, () => {} : Function), применяемая к самому классу (не к создаваемым объектам), позволяющая отслеживать изменения значения определенного объекта, и выполнять по ним определенные действия. Доступен внутри конструктора, примеры использования: 3, 4.
globalWatch (item: string, f: Function)
globalWatch (item: string, () => {} : Function) работает аналогично простому watch-у, но может применяться к другим классам State-менеджера (а не только к this, в отличие от предыдущего), и отслеживать изменения их объектов.