データのjsonをvuexストアに格納し、コンポーネント内のアクセス

Question

私のvuejsアプリケーションにコンテンツのJSONファイルをロードし、コンポーネントにアクセスしようとしています。私は、APIを作成することにより、vuexストアにJSONを読み込むことができています：

import Vue from 'vue'; 

const Http = new Vue(); 

export function getData() { 
    return Http.$http.get('./app/assets/content/en_uk.json') 
    .then(response => Promise.resolve(response.data)) 
    .catch(error => Promise.reject(error)); 
} 

と私はメインVUEインスタンスの作成機能

export default new Vue({ 
    el: '#root', 
    store, 
    router, 
    created() { 
    getSiteContent(store); 
    }, 
    render: h => h('router-view') 
}); 

上getSiteContentを実行するアクション

export const getSiteContent = ({commit}) => { 
    api.getData().then(data => { 
    commit('siteContent', data); 
    }); 
}; 

クロムのvueデバッグツールを使用して店舗を見ることができます

export const state = { 
    isSearching: false, 
    searchQuery: '', 
    siteData: {}, 
    filteredComponents: [], 
    hasResults: false, 
    activeComponent: null 
}; 

はsiteDataで更新されます。私は未定義のPROJECT_NAMEのプロパティを読み取ることができません取得{{mumbo}}のように私のコンポーネントで

{ 
    "global": { 
    "project_name": { 
     "text": "Project title" 
    }, 
    "search": { 
     "form_placeholder": { 
     "text": "Search..." 
     }, 
     "no_results": { 
     "text": "Sorry no results for '{0}' was found" 
     }, 
     "search_text": { 
     "text": "You are searching for '{0}' and there are {1} found" 
     } 
    } 
    } 
} 

は私がしようとするとアクセス

computed: { 
     ...mapGetters(['siteData']), 
     mumbo() { 
     return this.siteData.global.project_name; 
     } 
    } 

：

これは、JSONの一部です。私はこのように感じる

は私が何か間違ったことをやっている場合、私はわからないか、私はへの接続をしないのですsiteData.global

を返すように設定したときに、それが転倒しないように、時間の問題ですこれを動作させる。

Answer 1

ここで問題を推測したので、Vueは、データがまだ読み込まれている間に、その計算されたプロパティの内容にsiteDataにアクセスしようとしています。 siteDataは最初は有効なオブジェクトですが、siteDataにはデータがまだロードされていないときはglobalフィールドがないため、siteData.global.project_nameにアクセスしようとすると失敗します。エラーを回避するには、このようなチェックを含める必要があります：

mumbo() { 
    return this.siteData.global ? this.siteData.global.project_name : 'Loading...'; 
} 

ソリューションを説明するために、ここにあなたのコードに基づいて、単純なJSFiddleです。