RKIS/articles/web_22.md

К содержанию

Совмещение API и стора, кеширование данных

Достаточно часто в приложении на разных страницах приходится загружать одни и те же данные. Чтобы избежать этого можно совместить стор (pinia) и загрузку данных (api)

Допустим у нас есть список фильмов в хранилище:

export const useApiStore = defineStore('api', () => {
    // список фильмов
    const movies = ref([])

    // объект, который возвращается стором
    // в компонентах мы можем сделать декомпозицию
    // и получить нужную переменную
    return { movies }
})

Реализуем метод получения фильмов с кешированием (в этом же сторе)

...

async function loadMovies () {
    if (movies.value.length == 0) {
        // если список пустой (ещё не загружали)
        return await fetch(  
            'https://cinema.kolei.ru/movies?filter=new'
        )
        .then(r => r.json())
        .then(res => {
            // записываем результат в стор
            films.value = res
            return res
        })
    } else {
        // список уже есть, возвращаем его, заворачивая в промис 
        // (наша функция возвращает промис, поэтому нужно эмулировать правильный ответ)
        return Promise.resolve(films.value)
    }
}

return { movies, loadMovies }

Теперь в любом компоненте, где нужен список фильмов, мы можем получить его из стора

const api = useApiStore()
const { movies } = storeToRef(api)
api.loadMovies()

Здесь переменная movies реактивна (как и при объявлении через ref) и после загрузки данных они будут доступны в компоненте.

const { переменная } = объект - тут никакой магии, простая декомпозиция объекта (который возвращается из стора)

Назад | Дальше