Использование

Для использования объектов Stor-а во vue-компоненте нужно создать экземпляр класса:

<script setup lang="ts">
import Posts from '@/module/store/posts'

const posts = new Posts()
</script>

, после чего с объектами класса предлагаются для работы следующие функции (все нижеперечисленные функции применяются к объекту Stor-a):

all ()

Получение данных объекта с api, в случае, если значение объекта - массив

get (path: string)

Получение данных объекта с api, в случае, если значение не является массивом. В аргументе ожидается пустая строка, либо же - можно дописать путь.

Если данные с api были получены методом get() или all() в рамках сессии ранее - то повторно запрос к api не осуществляется, при повторном вызове метода берутся из памяти уже имеющиеся данные. Если всё же требуется принудительно получить данные заново - для этого есть метод user()

sync ()

Позволяет работать с объектом Stor-а как с Promis-ом. Пример использования:

myStore.items.sync().get('').then(e => {
    console.log('Данные получены. Вот они:')
    console.log(e)
})

getBy (id: number)

Получение данных, в случае если объект поддерживает пагинацию. В аргументе прописывается номер первой странички, которую необходимо получить. Далее управление пагинацией осуществляется методами: - next () - получает страничку под следующим номером - prev () - получает страничку под предыдущим номером - pageBy (index: number) - получает страничку под номером index

user ()

Даёт несколько иной доступ к объекту. Особенности использования объекта через user():

• функции all(), get() при вызове будут получать данные с api заново.

customAuth (token: string)

Позволяет вручную передать токен для Bearer-авторизации

filter (f: Function)

Позволяет автоматически фильтровать данные на стороне клиента. Может быть полезным, если фильтр необходим только в одной vue-компоненте.

setQuery (obj: QueryParam)

Позволяет вручную выставить query-параметры для api-запроса, нужные в рамках данной компоненты. Query-параметры принимаются в виде объекта, где ключ(-и) - название параметра, значение(-я) - непосредственно значения.

Свойства

Также доступны реактивные свойства:

value

, непосредственно содержащее нужное клиенту значение объекта.

isLoading

, равное true в процессе загрузки данных с api.

Дополнительные компоненты

NxIntersection

Для удобства осуществления пагинации данных в случае, если подразумевается бесконечная прокрутка ленты с блоками данных, предлагается Vue-компонент NxIntersection, импортируемый и используемый следующим образом:

import NXIntersection from 'nuxoblivius/components/NxIntersection/index.vue'

<template>
    <div v-for="post in Posts.posts.value">{{ post.text }}</div>
    <NXIntersection :hold="analysis.items.isLoading" @reach="()=>{ posts.items.next()}" :done="!analysis.items.value.length"/>
</template>

Данный компонент отслеживает, когда прокрутка блока доходит до него, после чего возвращает событие reach, отлавливая которое, можно вызывать загрузку следующей порции данных. Пропсом он может принимать переменную done, которая будет говорить о завершении прокрутки (следовательно, работы самого компонента), и hold, который, при значении true, также временно отключает отслеживание прокрутки (что может быть полезно в начале рендеринга страницы).