↓メインコンテンツだよ＼(^o^)／

Fetch Test

このページでは、API からデータを取得して表示する流れを説明します。

基本的に、action 領域である pageコンポーネントでデータ取得を行い、そのページの要素のコンポーネントにデータを渡して、各領域を表示をしていきます。※store を使います

このページは ?id=1 のように、 id を指定してデータを取得し表示するページを想定しています。
また、pending（取得待機中） の表示を分かりやすくするため、 1秒遅延するAPIを使用しています。

Page: /fetch-test?id=1

ボタンクリックでナビゲーションしますので、クリックして取得データが変わるのを確認してください。

fetch-test/index?id=2 fetch-test/index?id=1

▽ store でキャッシュしたデータを表示

src/components/sample/FetchComponent.vue を確認下さい。
このページコンポーネントで取得し store でキャッシュしたデータを、 ↓このコンポーネント表示しています。
同じデータになってるのを確認して下さい。

{}

▽ store を使う

親で APIから取得したデータを、子・孫コンポーネントに渡す時に props で渡してもいいですが、階層が深くなるとコードの可読性やメンテナンス性を損なう可能性があります。これは「prop drilling（propsのバケツリレー）」と呼ばれ問題になることがあります。

そのため、一般的には、store でデータをキャッシュしておき、子・孫のコンポーネントではその store からデータを取得して、データの利用・表示などをすることが多いです。ただし、store の使用も適切な設計でないと、問題になる場合もあるので注意が必要です。

詳細は src/stores/pageDataStore.ts を参照してください。

↑メインコンテンツだよ＼(^o^)／