1. Vue.js JSSサンプル・アプリケーションの概要

JSS Vue.jsサンプル アプリでのルーティングと状態管理

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

サンプル アプリでは、レイアウト サービス (または切断モードのローカル ルート データ ファイル ) に基づく動的ルーティングを使用し、ルート/ナビゲーションの変更を使用してアプリの状態変更をトリガーします。プライマリ実行フローのトレースは、ルート設定から開始する必要があります。

先端

この実行フローでは、SitecoreJssStoreプラグインについて言及しています。このプラグインは、開発者がSitecoreのコンテキストにアクセスし、データをルーティングするのに役立ちます。

クライアント側のルーティング

src/main.jsファイル内のアプリのメインクライアント側エントリポイントから始めて、クライアント側ルーティングのフローを以下で説明します。

  • ファイルsrc/main.jsでは、サーバーサイド レンダリング (SSR) 用のデータと状態データが収集され、src/createApp.jsに渡されます。

  • ファイルsrc/createApp.jsでは、Vueアプリインスタンスは、src/router.jsで定義されているアプリルーターとともに作成および設定され、レンダリングはsrc/AppRoot.vueに渡されます。アプリの初期状態/ルート データが提供されている場合、アプリケーションはファイル ファイルsrc/lib/SitecoreJssStorePlugin.jsにあるJSS用のカスタマイズ可能なVueプラグインを使用して状態を設定および管理します。

  • ファイルsrc/AppRoot.vueでは、<router-view />コンポーネントは、src/router.jsで定義されているように、現在のルートに一致するコンポーネントをレンダリングする役割を担います。

  • ファイルsrc/router.jsでは、ルーターはアプリ ルートの変更に応答してsrc/RouteHandler.vueコンポーネントに渡すように構成されています。

  • ファイルsrc/RouteHandler.vueでは、ルート/レイアウトサービスデータは、SitecoreJssStorePluginによってVueリアクティブデータオブジェクトに提供されます。初期データが存在しない場合は、現在のルートのレイアウト サービス データが取得され、アプリのルートと言語の状態が更新されます。その後のルート変更では、src/lib/SitecoreJssStorePlugin.jsを通じてグローバル アプリの状態が更新されます。

  • ファイルsrc/RouteHandler.vueでは、実際のアプリ マークアップ レンダリングはLayout.vueコンポーネントに渡されます。グローバル アプリの状態はリアクティブ データ オブジェクトにバインドされているため、新しいレイアウト サービス/ルート データを受信すると、src/Layout.vueコンポーネントが再レンダリングされます。また、グローバル アプリの状態は、src/Layout.vueの外部に存在するコンポーネントがルート/コンテキスト データの変更に対応する方法を提供します。

  • ファイルsrc/Layout.vueでは、JSSアプリのシェルHTML要素とグローバル要素、およびそのルートプレースホルダーがレンダリングされます。

  • ルートの残りの構造は、ルート データによって定義され、ルート データによって、各プレースホルダーに存在するコンポーネント (およびそのコンテンツ データ) が定義されます。

サーバー側のルーティング

VueアプリがNodeサーバーによってプリレンダリングされると、最初の応答でHTMLをクライアントに返します。つまり、ルート データ フローはクライアント側のルーティングと似ていますが、いくつかの重要な違いがあります。

次に、サーバー側のルート データ フローとクライアント側のルーティングの違いについて説明します。

  • 最初のステップは、アプリケーションモードによって異なります。

    • 統合モードの場合のみ、Sitecoreはリクエストを受信し、ルートをサーバー側で解析し、リクエストされたアイテムがJSSアプリケーションによって処理されるかどうか、およびどのバンドルを実行するかを決定します。

    • ヘッドレス モードの場合のみ、Node SSRプロキシはリクエストを受信し、それをSitecoreレイアウト サービスに渡します。

  • Nodeホストは、server/server.jsファイルにあるサーバーバンドルからrenderView関数を呼び出します。関数の引数には、ルート データ/レイアウト サービスの出力が含まれます。

  • renderView関数は、次の手順を実行します。

    • サーバーサイドレンダリング (レイアウトサービス、ディクショナリ) で使用するデータを受け取ります。

    • クライアント側のレンダリングで使用されるsrc/createApp.jsファイルを使用してアプリを作成および初期化します。

    • ファイルsrc/createApp.jsでは、src/lib/SitecoreJssStorePlugin.jsプラグインを使用してSSRデータをアプリケーションの初期状態に設定します。

    • SSRのVueツールを使用してアプリをHTMLにレンダリングします。

    • レンダリングされたアプリをindex.htmlテンプレートに埋め込み、メタデータとSSR状態を設定します。SSR状態 (window.__JSS_STATE__) は、クライアント上のアプリの状態をリハイドレートするために使用され、初期ルート データのためにレイアウト サービスを呼び出す必要がなくなります。

    • 最終的なHTMLでレンダリング コールバック関数を呼び出します。

この記事を改善するための提案がある場合は、 お知らせください!