Как выполнить родительский хук жизненного цикла перед дочерним в приложении Vue? - PullRequest
Новая
       81

Как выполнить родительский хук жизненного цикла перед дочерним в приложении Vue?

0 голосов
/ 14 октября 2019

У нас есть следующий родительский компонент (App.vue) 

<template>
  <b-container
    id="app"
    fluid
    class="px-0"
  >
    <b-row no-gutters>
      <side-bar :routes="routes"/>
      <b-col>
        <notifications position='top center' />
        <user-info :routes="routes"/>
        <b-row no-gutters class="router-view">
          <b-col>
              <router-view/>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import UserInfo from './views/navbar/UserInfo'
import SideBar from './views/sidebar/SideBar'
import AuthService from '@/services/auth.service'
import NotificationsService from '@/services/notifications.service'

export default {
  name: 'App',
  components: { UserInfo, SideBar },
  data () {
    return {
      routes: [
        { name: 'app.dashboard', params: {}, icon: 'home', text: 'Dashboard' },
        { name: 'app.jobs', params: {}, icon: 'briefcase', text: 'Jobs' },
        { name: 'app.firms', params: {}, icon: 'th-large', text: 'Firms' }
        // { name: '#', params: {}, icon: 'user', text: 'People' },
        // { name: '#', params: {}, icon: 'gavel', text: 'Bids' },
        // { name: '#', params: {}, icon: 'users', text: 'MF People' },
        // { name: '#', params: {}, icon: 'chart-bar', text: 'Reports' }
      ]
    }
  },
  created () {
    this.loginOnLoad()
  },
  methods: {
    async loginOnLoad () {
      this.authService = new AuthService()
      let user = this.authService.sso()
      if (!user) {
        this.loginFailed = true
        await this.login()
        await this.authService.assignAccessTokenToHeader()
        NotificationsService.successNotification('Logged in successfully')
      } else {
        await this.authService.assignAccessTokenToHeader()
        NotificationsService.successNotification('Welcome Back')
      }
    }
  }
}
</script>

<style>

</style>

assignAccessTokenToHeader отправляет действие Vuex, которое назначает результат аутентифицированного пользователя в хранилище

Thisявляется дочерним компонентом (Dashboard.vue) 

<template>
  <div>
    <b-row class="border-bottom" no-gutters>
      <b-col sm="12" class="px-4 py-3">
        <h3 class="text-uppercase">Dashboard</h3>
        <h5 class="font-weight-normal text-secondary mb-0">Personalised Favourites</h5>
      </b-col>
    </b-row>
    <b-row no-gutters>
      <b-col>

        <b-row no-gutters>
          <b-col sm="6">
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>

        <b-row no-gutters>
          <b-col sm="6">
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>

        <b-row no-gutters>
          <b-col>
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>

        <b-row no-gutters>
          <b-col>
            <b-card title="Firms" class=""></b-card>
          </b-col>
        </b-row>
<!--        <b-card title="Bids" class="d-inline-flex w-25">-->

<!--        </b-card>-->
<!--        <b-card title="Jobs" class="d-inline-flex w-50">-->

<!--        </b-card>-->
<!--        <b-card title="People" class="d-inline-flex w-50">-->

<!--        </b-card>-->
      </b-col>
    </b-row>
  </div>
</template>

<script>
import AppService from '@/services/app.service'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  created () {
    this.loadGridAndContent(this.userDetails.psref)
  },
  computed: {
    ...mapState({
      userDetails: state => state.auth.user
    })
  },
  methods: {
    async loadGridAndContent (psRef) {
      let data = await AppService.loadDashboard(psRef)
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>

Dashboard.vue, отображаемым внутри router-view из App.vue, и маршрут является /

Теперь мы хотели быСозданный App.vue хук всегда запускается первым, но похоже, что Dashboard.vue пытается запустить созданный хук до App.vue и, следовательно, не работает, потому что использует psref, полученный в родительском объекте.

Каким будет обходной путь или правильный способ реализации, чтобы информация о входе пользователя в систему всегда сначала получалась, сохранялась в Vuex, а затем ее могли использовать дочерние компоненты?

1 Ответ

0 голосов
/ 14 октября 2019

Обычно, когда ваш дочерний компонент запускает mount () , который зависит от действия родителя или подключенного хука жизненного цикла, вы можете избежать его загрузки заранее, поставив v-if на вашем дочернем компоненте . Как только ваш родитель закончил свою задачу, вы просто переключаете переменную на true , и тогда ваш ребенок загружается, поэтому вы избегаете пустых или нулевых значений.

...