[К содержанию](../readme.md#введение-в-web-разработку)

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

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

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

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

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

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

```js
...

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 }
```

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

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

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

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

[Назад](./web_21.md) | [Дальше](./web_23.md)