jackmarston
@jackmarston
human

Как правильно общаться с базой данных во Vue?

Весь день провозился, ничего не выходит.

Пример: Я авторизовался на сайте. В этот момент уже запросил из бд все нужные данные по пользователю (ава, имя и прочее). Все, мне больше не нужно обращаться к базе до тех пор пока я не буду изменять данные. Но получается так, что переходя в разные разделы сайта снова происходит запрос к бд за теми же данными. Потому что запрос происходит из компонента.

Понятное дело, что если требуется какая-то интерактивность и смена значений то это можно делать и в компоненте, в котором мы с этими данными взаимодействуем, но когда это общие данные например данные профиля, как их запросить один раз и раздавать по любым компонентам. Раздавать я умею, не понимаю как минимизировать запрос до 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. При переходе на неё запрос к базе за указанными данными происходит каждый раз.
  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ответы на вопрос 1
Vertenz
@Vertenz
Мечтетель
Если правильно понял задачу) То у вас идет авторизация, дальше получили данные о пользователе. Чтобы не тащить их во все нужные компоненты то их можно сохранить в стор. Дальше просто при перезагрузке приложения или в необходимых для вас случаях вы можете проверять время изменения данных на бэке и у вас (или какой-то id изменения), чтобы понять нужен ли новый запрос.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы