如何在Vue应用程序中先于子生命周期钩子执行父生命周期钩子？

Question

我们有以下父组件(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操作，该操作分配存储中经过身份验证的用户的结果

这是子组件(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在App.vue的router-view内呈现，并且路由为/

现在，我们希望App.vue的创建的钩子总是首先运行，但看起来Dashboard.vue试图在App.vue钩子之前运行它创建的钩子，因此失败了，因为它使用了在父级中获取的psref。

为了让用户登录信息总是首先被获取，存储在Vuex中，然后子组件可以使用它，有什么办法可以解决这个问题，或者实现一个正确的方法？

Answer 1

通常，只要您的子组件运行依赖于父组件操作或挂载生命周期挂钩的 mounted ()，您就可以通过将v-if放在子组件上来避免预先加载。一旦您的父级完成了它的任务，您只需将一个变量切换为真的，然后您的子级就会被加载，因此您可以避免空值或null值。