Vuex berechnete Eigenschaft aktualisiert nur, wenn Route geändert und dann wieder geändert wird

Question

In main.js meiner App ich eine Aktion, die Unternehmen aus meiner API ruft und wählt die erste. Diese Aktion löst jedes Mal aus, scheint hier nicht zu versagen.

new Vue({ 
    el: '#app', 
    store, 
    router, 
    render: h => h(App), 
    created: function() { 
    this.$store.dispatch('getCompaniesAndSelectFirst'); 
    } 
}) 

In einer anderen Ansicht Ich brauche Kampagnen abzurufen, die zu den ausgewählten Unternehmen gehören, so dass ich dies auf dem Berg mit vue-Ressource.

mounted: function() { 
    if (this.selectedCompanyId) { 
    this.$http.get('Campaigns', {params: {companyId: this.selectedCompanyId}}).then(response => { 
     // success callback 
     this.numbersTableData = response.body; 
    }, response => { 
     // error callback 
    }); 
    } 
} 

selectedCompanyId ist mein berechnete Eigenschaft, die die ID des ausgewählten Unternehmens in Vuex zurückgibt.

selectedCompanyId: function() { 
    return this.$store.getters.selectedCompanyId; 
} 

Die Frage ist selectedCompanyId an dieser Stelle nicht definiert ist, ob dies die erste Ansicht ist, die geladen wird.

Wenn ich die Seite selectedCompanyId aktualisieren, ist immer noch undefined und meine Abrufanforderung schlägt fehl.

Wenn ich die Anwendung auf dieser Ansicht öffnen, ist die selectedCompanyId nicht definiert und die Get-Anfrage schlägt fehl, aber wenn ich zu einer anderen Ansicht route und dann zurück selectedCompanyId hat geladen und die Anfrage ist erfolgreich.

Wenn ich die Anwendung in einer anderen Ansicht öffnen, und dann die Route zu der Ansicht selectedCompanyId definiert ist und die Get-Anforderung erfolgreich ist.

Wie ich es verstehe, ist dies, weil meine Anfrage erhalten, dass Unternehmen und wählt die erste braucht Zeit, um abzuschließen.

Wie kann ich das lösen? Gibt es einen besseren Weg, um das zu tun, was ich versuche?

Answer 1

Ich habe die Aktion getCompaniesAndSelectFirst in der created-Funktion der Vue-Instanz beendet.

Ich veränderte die getCompaniesAndSelectFirst Aktion ein Versprechen zurückzukehren:

export const getCompaniesAndSelectFirst = ({ commit, state }) => { 
    return Vue.http.get('Companies').then(response => { 
    // get body data 
    var companies = response.body; 

    commit('getCompanies', companies); 
    commit('selectCompany', companies[0].Id); 
    }, response => { 
    // error callback 
    }); 
} 

ich ein Navigations Wache erstellt, der die Aktion auslöst, wenn Staat auf die Route einen truthy Wert für selectedCompanyId, und nur einmal das Versprechen enthalten weiterhin nicht von der Aktion zurückgegeben wird gelöst.