кеширование

articles/web_22.md

@@ -1,4 +1,45 @@
 [К содержанию](../readme.md#введение-в-web-разработку)
 
+# Кеширование данных (в приложении)
+
+Достаточно часто в приложении на разных страницах приходится загружать одни и те же данные. Чтобы избежать этого можно совместить стор (**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 }
+```
 
 [Назад](./web_21.md)