web-dev-qa-db-ja.com

AsyncdataとFetchの違い

フェッチデータと非同期データの正確な違いは何ですか。公式文書には次のように書かれています：

asyncData

データを取得して、サーバー側でレンダリングすることができます。 Nuxt.jsは、コンポーネントデータを設定する前に非同期操作を処理できるasyncDataメソッドを追加します。

asyncDataは、コンポーネントをロードする前に毎回呼び出されます（ページコンポーネントのみ）。サーバー側から、または対応するルートに移動する前に呼び出すことができます。このメソッドは、コンテキストオブジェクトを最初の引数として受け取ります。これを使用して、データをフェッチし、コンポーネントデータを返すことができます。

フェッチ

Fetchメソッドは、ページをレンダリングする前にストアを埋めるために使用されます。コンポーネントデータを設定しないことを除いて、asyncDataメソッドに似ています。 fetchメソッドは、設定されている場合、コンポーネントをロードする前に毎回呼び出されます（ページコンポーネントの場合のみ）。サーバー側から、または対応するルートに移動する前に呼び出すことができます。

Fetchメソッドは、最初の引数としてコンテキストオブジェクトを受け取ります。このメソッドを使用して、データをフェッチしてストアを埋めることができます。フェッチメソッドを非同期にするには、Promiseを返します。nuxt.jsは、コンポーネントがレンダリングされる前にプロミスが解決されるのを待ちます。

フェッチは、ストアをデータで埋めるために使用されますか？しかし、asyncDataでは、これはストアを介してコミットすることも可能ですか？なぜ2つの方法があるのか​​分かりません。

両方のメソッドは初期ロードでサーバー側で実行され、その後アプリケーションをナビゲートするとクライアント側で実行されます。

誰かがこれらの方法を他の方法より上に使用する利点を説明できますか？

手伝ってくれてありがとう。

vue.jsvuejs2vuexnuxt.js
20
Yakalent

私が言いたいことの口実として、いくつかのポイントを繰り返してみましょう

  • asyncDataは、コンポーネントレベルのオブジェクトを設定し、vuexストアにアクセスできます
  • fetchはコンポーネントレベルのオブジェクトを設定できませんが、vuexストアにアクセスできます
  • asyncDataとfetchの両方が、初期ロード中にサーバー側でトリガーされます
  • 初期ロード後、対応するページルートが呼び出されると、asyncDataおよびfetchがトリガーされます

1）デザインが次の場合

  • Vuexストアを中央リポジトリとして使用する
  • アプリケーション全体のvuexストアからデータにアクセスする

use fetch

2）デザインが次の場合

  • Vuexストアを中央リポジトリとして使用する
  • コンポーネントレベルのオブジェクトを設定するオプションがある
  • 特定のルートでフェッチされたデータは、単一のコンポーネントでのみ使用されます
  • Vuexストアまたはコンポーネントレベルオブジェクトの設定のいずれかの権限を持つ柔軟性が必要

use asyncData

誰かがこれらの方法を他の方法より上に使用する利点を説明できますか？

asyncDataまたはfetchを使用しても欠点はありません。

asyncDataまたはfetchの選択は、アーキテクチャに完全に依存します

48
divine

上記のことは見ていません（少なくとも、はっきりとは言えません）。 asyncDataは、データをページのdata（）オブジェクトに自動的にマージします。フェッチはしません。フェッチでは、必要に応じてデータを処理するのはユーザー次第です。

1
kp123

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>
0
HoangYell