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