2

コンテンツの JSON ファイルを vuejs アプリにロードし、コンポーネントでアクセスしようとしています。API を作成することで、json を vuex ストアにロードできます。

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

そしてアクション

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

メイン vue インスタンスの作成された関数で getSiteContent を実行します

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

Chrome で vue デバッグ ツールを使用すると、ストアが表示されます

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

siteData で更新されます。

これはjsonの一部です：

{
  "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;
      }
    }

私のコンポーネントで{{mumbo}}は、未定義の project_name のプロパティを読み取ることができません。

siteData.globalを返すように設定しても倒れないので、これは時間の問題だと思います

何か間違ったことをしているのか、これを機能させるための接続が失われているのかわかりません。

4

1 に答える 1

1

siteDataご想像のとおり、ここでの問題は、データがまだロードされている間に、Vue がその計算されたプロパティの内容にアクセスしようとしていることです。最初siteDataは有効なオブジェクトですが、データがまだロードされていない場合はフィールドがないsiteData.global.project_nameため、アクセスしようとすると失敗します。エラーを防ぐには、次のようなチェックを含める必要があります。siteDataglobal

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

ソリューションを説明するために、コードに基づく単純なJSFiddleを次に示します。

于 2016-11-16T22:05:59.587 に答える