Загрузите переменные в представлении, затем используйте их из компонента Vue.js

Question

У меня есть проект Vue.js, в котором я получаю несколько значений из бэкэнда через вызовы REST.Одна из этих переменных говорит мне, подтвердил ли пользователь свой адрес электронной почты или нет.Значения загружаются на mounted главной страницы.Я хочу передать логическое значение verified компоненту, который показывает тост, напоминающий пользователю, что нужно проверить свою электронную почту, если она не подтверждена.Я не хочу отправлять вызов REST дважды (с главной страницы и компонента).Есть ли способ передать это значение со страницы в компонент?

В моем приложении много страниц, поэтому вместо добавления компонента поверх всех страниц я добавил его в App.vue следующим образом:

<template>
  <div id="app" class="app">
    <Navbar></Navbar>
    <b-container fluid class="app-body">
      <div class="main">
        <My-email-verification-component></My-email-verification-component>
        <router-view />
      </div>
    </b-container>
    <Footer />
  </div>
</template>

Если бы я добавил компонент на каждую страницу, было бы легко использовать реквизит с главной страницы.Теперь я думаю, что должен подумать о том, как я это делаю ... кажется плохой практикой.это 1009 *

Answer 1

Технически возможно передать данные текущему компоненту, связав данные с реквизитами на <router-view>:

<my-email-verification v-model="verified" />
<router-view :verified="verified" />

Для этого требуется, чтобы компонент проверки электронной почты поддержка v-model путем принятия пропуска value и выдачи новых значений с событием input:

// MyEmailVerification.vue
export default {
   props: ['value'],
   mounted() {
      const isVerified = /* ... */
      this.$emit('input', isVerified)
   }
}

кажется плохой практикой.не так ли?

Мнение: Нет, я думаю, это хорошая практика - оставаться СУХОЙ .Однако я лично предпочитаю использовать компоненты только для рендеринга чего-либо.Для вашего случая использования я бы переместил подтверждение электронной почты в служебный класс, импортировал его в App.vue, вызвал его при необходимости (например, mounted()) и сохранил результат в свойстве локальных данных (isVerified).