Vuejs：SSR not working

Question

私はテンプレートとしてhackernews Vuejsを使用しています。私は、コンポーネントにAsyncDataを使用していたとき、私が作成した（）またはbeforeMounted（）などから同じアクションを呼び出すとき、それは

AsyncData

asyncData({ store }) { 
    return store.dispatch('LOCATIONS'); 
}, 

アクション

LOCATIONS: ({ commit, state }) => { 
    return state.locationList.length ? Promise.resolve(state.locationList) : axios.get('http://localhost:3000/api/Locations').then(({ data }) => commit('SET_LOCATIONS', data)) 
} 

を働いていませんそれは動作しており、状態は更新されていますが、asyncDataとして使用するとAPIは呼び出されません。

Answer 1

はここnuxtjs.orgからの回答です：

コンポーネントがasyncDataメソッドを持っていないので、あなたが直接コンポーネント内で非同期データサーバ側をフェッチできません することができます。 制限を回避するには、2つの基本的なオプションがあります。

がロードされたときに、mounted（）フックでAPI呼び出しを行い、データプロパティを設定します。欠点：サーバー側のレンダリングでは機能しません。 API をページコンポーネントのasyncData（）またはfetch（）メソッドで呼び出し、 は、サブコンポーネントとしてデータをpropsとして渡します。サーバーのレンダリングは で問題ありません。欠点：ページのasyncData（）またはfetch（）が、他のコンポーネントのデータを読み込んでいるため、 が読みにくい可能性があります。