Весь день провозился, ничего не выходит.
Пример: Я авторизовался на сайте. В этот момент уже запросил из бд все нужные данные по пользователю (ава, имя и прочее). Все, мне больше не нужно обращаться к базе до тех пор пока я не буду изменять данные. Но получается так, что переходя в разные разделы сайта снова происходит запрос к бд за теми же данными. Потому что запрос происходит из компонента.
Понятное дело, что если требуется какая-то интерактивность и смена значений то это можно делать и в компоненте, в котором мы с этими данными взаимодействуем, но когда это общие данные например данные профиля, как их запросить один раз и раздавать по любым компонентам. Раздавать я умею, не понимаю как минимизировать запрос до 1 раза пока я их не изменю и не запрошу снова.
Если постоянно спрашивать userdata на каждой странице ViewPage.vue то в чем тогда плюсы, в том что страничка не перезагружается)) Сомнительный плюс. Горит сильно))
<template>
<NavbarHeader :user-data="[userFirstName, userLastName]"></NavbarHeader>
<main class="container py-4 px-4">
<h1>This is a profile page</h1>
<p>First name: {{ userFirstName }}</p>
<p>Last name: {{ userLastName }}</p>
</main>
<Footer></Footer>
</template>
<script>
import NavbarHeader from '@/components/NavbarHeader.vue'
import Footer from '@/components/Footer.vue'
export default {
components:{
NavbarHeader,
Footer
},
data() {
return {
userFirstName: '',
userLastName: '',
avatar: null,
error: null,
};
},
mounted () {
const id = localStorage.getItem('id');
this.$axios.get(`/app/api/user.php?id=${id}`)
.then(response => {
if (response.status === false) {
this.$router.push({ path: '/logout' });
} else {
this.userFirstName = response.data.user_data.firstName;
this.userLastName = response.data.user_data.lastName;
this.avatar = response.data.avatar ? `/uploads/${response.data.avatar}` : '/avatar.svg';
console.log(response.data.user_data);
}
})
.catch(error => {
console.log(error);
});
}
}
</script>
В данном примере это страницы профиля /profile которая импортирована в файл App.vue. При переходе на неё запрос к базе за указанными данными происходит каждый раз.
Простой
