api + pinia

articles/web_22.md

@@ -1,6 +1,6 @@
 [К содержанию](../readme.md#введение-в-web-разработку)
 
-# Кеширование данных (в приложении)
+# Совмещение API и стора, кеширование данных
 
 Достаточно часто в приложении на разных страницах приходится загружать одни и те же данные. Чтобы избежать этого можно совместить стор (**pinia**) и загрузку данных (**api**)
 
@@ -11,6 +11,9 @@ export const useApiStore = defineStore('api', () => {
     // список фильмов
     const movies = ref([])
 
+    // объект, который возвращается стором
+    // в компонентах мы можем сделать декомпозицию
+    // и получить нужную переменную
     return { movies }
 })
 ```
@@ -42,4 +45,16 @@ async function loadMovies () {
 return { movies, loadMovies }
 ```
 
+Теперь в любом компоненте, где нужен список фильмов, мы можем получить его из стора
+
+```js
+const api = useApiStore()
+const { movies } = storeToRef(api)
+api.loadMovies()
+```
+
+Здесь переменная _movies_ реактивна (как и при объявлении через **ref**) и после загрузки данных они будут доступны в компоненте.
+
+>`const { переменная } = объект` - тут никакой магии, простая декомпозиция объекта (который возвращается из стора)
+
 [Назад](./web_21.md)

readme.md

@@ -357,6 +357,7 @@ https://office-menu.ru/uroki-sql Уроки SQL
 1. [Vue.js: Работа с Яндекс картами](./articles/web_19.md)
 1. [Vue.js: Валидация форм](./articles/web_20.md)
 1. [Swipe to delete (смахнуть для удаления)](./articles/web_21.md)
+1. [Совмещение API и стора, кеширование данных](./articles/web_22.md)
 
 <!--