Vuejs synchron vor dem Rendern Daten anfordern

Question

Ich habe Single-Seite-Anwendung, die Authentifizierung erfordert. Wenn der Benutzer authentifiziert wurde, besuchen Sie einige Seiten oder klicken Sie auf die Schaltfläche zum erneuten Laden im Browser, um eine API anzufordern, die ihre Authentifizierungsdaten zur Verfügung stellt. dann habe ich einen Fehler wie folgt aus:

[Vue warn]: Error when evaluating expression "auth.name": TypeError: Cannot read property 'name' of null (found in component: <navbar>)

Dieser Fehler wird verursacht, weil vue Auth Daten machen während die Anforderung an api noch nicht beendet haben.

Ist es möglich, vue warten die Anfrage api bis zum Abschluss zuerst, bevor vue render auth Daten?

nur deutlicher was hier vor sich geht. Hier ist der Code:

// main.js 
import Vue from 'vue' 
import App from './App.vue' // root vue 
import store from './vuex/store' // vuex 
import router from './router' // my router map 

sync(store, router) 
router.start(App, '#app') 
// end main.js 



// App.vue 
<template> 
    <main> 
    <div class="wrapper"> 
     <router-view></router-view> 
    </div> 
    </main> 
</template> 

<script> 
    import authService from './services/auth' // import authservice 

    ready() { 
    // here is code that should be done first before vue render all authData 
    auth.getUser((response) => { 
     self.authData = response 
    }) 
    }, 
    data() { 
    return { 
     authData: null // default is null until the api finish the process 
    } 
    } 
</script> 
// end App.vue 



// SomeRouterComponents.vue 
<template> 
    <!-- some content --> 
    <div> 
    // always got error: cannot read property 'name' of null 
    // here I expect to render this after api has been resolved 
    {{ $root.authData.name }} 
    </div> 
    <!-- some content --> 
</template> 

Answer 1

Das Problem, wie Sie gesagt, dass Sie versuchen, ein Objekt zuzugreifen, die nicht vorhanden ist, und aufgrund des Fehlers, Vue kann es in dem nächsten Tick nicht machen. Die Lösung besteht darin, eine einfache v-if zu verwenden, um zu überprüfen, ob die Daten geladen sind, dies funktioniert nur für reaktive Daten.

Wurzelkomponente

import auth from './services/auth' // import authservice 

    ready() { 
    // here is code that should be done first before vue render all authData 
    auth.getUser((response) => { 
     self.authData = response 
     self.dataReady = true 
    }) 
    }, 
    data() { 
    return { 
     authData: null, // default is null until the api finish the process 
     dataReady: false 
    } 
    } 

andere Komponente

<div v-if="dataReady"> 
    // note that if you use v-show you will get the same error 
    {{ $root.authData.name }} 
    </div> 
    <div v-if="!dataReady"> 
    // or some other loading effect 
    Loading... 
    </div> 

I v-if="!dataReady" statt v-else verwendet, weil es

Answer 2

in Vue 2.0 veraltet werden Sie könnten Vue nur verhindern, versuchen um auf die Objekteigenschaft zuzugreifen , Wie folgt aus:

{{ $root.authData ? $root.authData.name : null }} 

Sie könnten sogar null in einigen Fällen für eine Loading... Nachricht ändern.

Answer 3

Sie konnten die data transition hook mit der aktivierten Option waitForData verwenden:

<script> 
    import authService from './services/auth' 

    export default { 
    route: { 
     waitForData: true, // wait until data is loaded 

     data (transition) { 
     authService.getUser((response) => { 
      transition.next({ authData: response }) // set data 
     }) 
     } 
    }, 

    data() { 
     return { 
     authData: null 
     } 
    } 
    } 
</script> 

Auch wenn Sie diese Option nicht verwenden möchten, können Sie überprüfen, ob die Daten unter Verwendung der $loadingRouteData Eigenschaft geladen wird.

Weitere Details hier: http://router.vuejs.org/en/pipeline/data.html