Vuex計算されたプロパティは、ルートが変更されてから変更された場合にのみ更新されます。

Question

私のアプリケーションのmain.jsでは、私のAPIから企業を取得し、最初のものを選択するアクションをディスパッチします。このアクションは毎回送出され、ここでは失敗しないようです。私が選択した会社に所属するキャンペーンを取得する必要があるので、私はVUE-リソースをマウント上でこれを行う別のビューで

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

。

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はVuexで選択した会社のIDを返し、私の計算されたプロパティです。

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

問題は、これがロードされる最初のビューである場合selectedCompanyIdは、この時点で定義されていないです。

ページを更新すると、まだselectedCompanyIdは未定義であり、取得要求は失敗します。

このビューでアプリケーションを開くと、selectedCompanyIdは未定義で、取得要求は失敗しますが、別のビューにルーティングして戻った場合、selectedCompanyIdがロードされ、要求は成功します。

別のビューでアプリケーションを開き、ビューselectedCompanyIdへのルーティングが定義され、get要求が成功した場合。

私が理解しているように、これは、企業を取得し、最初のものを選択するリクエストが完了するまでに時間がかかるためです。

どうすればこの問題を解決できますか？私がやろうとしていることをする良い方法はありますか？

Answer 1

Vueインスタンスのcreated機能でgetCompaniesAndSelectFirstアクションのディスパッチを停止しました。

私は約束を返すようにgetCompaniesAndSelectFirstアクションを変更：

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 
    }); 
} 

状態がselectedCompanyIdためtruthy値が含まれている、とだけ約束いったんルートに続けていない場合、私はアクションをディスパッチするナビゲーションガードを作成アクションから返されたアクションは解決されます。