フェッチデータと非同期データの正確な違いは何ですか。公式文書には次のように書かれています:
asyncData
データを取得して、サーバー側でレンダリングすることができます。 Nuxt.jsは、コンポーネントデータを設定する前に非同期操作を処理できるasyncDataメソッドを追加します。
asyncDataは、コンポーネントをロードする前に毎回呼び出されます(ページコンポーネントのみ)。サーバー側から、または対応するルートに移動する前に呼び出すことができます。このメソッドは、コンテキストオブジェクトを最初の引数として受け取ります。これを使用して、データをフェッチし、コンポーネントデータを返すことができます。
フェッチ
Fetchメソッドは、ページをレンダリングする前にストアを埋めるために使用されます。コンポーネントデータを設定しないことを除いて、asyncDataメソッドに似ています。 fetchメソッドは、設定されている場合、コンポーネントをロードする前に毎回呼び出されます(ページコンポーネントの場合のみ)。サーバー側から、または対応するルートに移動する前に呼び出すことができます。
Fetchメソッドは、最初の引数としてコンテキストオブジェクトを受け取ります。このメソッドを使用して、データをフェッチしてストアを埋めることができます。フェッチメソッドを非同期にするには、Promiseを返します。nuxt.jsは、コンポーネントがレンダリングされる前にプロミスが解決されるのを待ちます。
フェッチは、ストアをデータで埋めるために使用されますか?しかし、asyncDataでは、これはストアを介してコミットすることも可能ですか?なぜ2つの方法があるのか分かりません。
両方のメソッドは初期ロードでサーバー側で実行され、その後アプリケーションをナビゲートするとクライアント側で実行されます。
誰かがこれらの方法を他の方法より上に使用する利点を説明できますか?
手伝ってくれてありがとう。
私が言いたいことの口実として、いくつかのポイントを繰り返してみましょう
asyncData
は、コンポーネントレベルのオブジェクトを設定し、vuexストアにアクセスできますfetch
はコンポーネントレベルのオブジェクトを設定できませんが、vuexストアにアクセスできますasyncData
とfetch
の両方が、初期ロード中にサーバー側でトリガーされますasyncData
およびfetch
がトリガーされます1)デザインが次の場合
use fetch
2)デザインが次の場合
use asyncData
誰かがこれらの方法を他の方法より上に使用する利点を説明できますか?
asyncData
またはfetch
を使用しても欠点はありません。
asyncData
またはfetch
の選択は、アーキテクチャに完全に依存します
上記のことは見ていません(少なくとも、はっきりとは言えません)。 asyncDataは、データをページのdata()オブジェクトに自動的にマージします。フェッチはしません。フェッチでは、必要に応じてデータを処理するのはユーザー次第です。
I. fetchとasyncDataはサーバー側で処理されます。
II。それらを使用する方法の違いを見ることができます:
a)フェッチ:ストアデータの変更
<script>
export default {
async fetch ({ store, params }) {
await store.dispatch('GET_STARS');
}
}
</script>
b)asyncData:コンテキスト(コンポーネントデータ)の変更
<script>
export default {
asyncData (context) {
return { project: 'nuxt' }
}
}
</script>