RKIS/articles/web_22.md

К содержанию

Кеширование данных (в приложении)

Достаточно часто в приложении на разных страницах приходится загружать одни и те же данные. Чтобы избежать этого можно совместить стор (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 }

Назад