|
|
@@ -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)
|
