vue.js - 如何在 Vue 应用程序中的子节点之前执行父生命周期挂钩？

问题描述

我们有以下父组件 ( 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.vuerouter-view在of内部呈现，App.vue并且路线是/

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

什么是解决这个问题的方法或正确的实现方法，以便始终首先获取用户登录信息，存储在 Vuex 中，然后子组件可以使用它？

标签： vue.jsvuejs2vuexvue-router

vue.js - 如何在 Vue 应用程序中的子节点之前执行父生命周期挂钩？

问题描述

解决方案

推荐阅读