JSS Vue.js サンプル アプリでのルーティングと状態の管理
このページの翻訳は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
では、SSR データが、src/lib/SitecoreJssStorePlugin.js
プラグインを使用してアプリケーションの初期状態に設定されます。 -
SSR 用の Vue ツールを使用して、アプリを HTML にレンダリングします。
-
レンダリングされたアプリを
index.html
テンプレートに埋め込み、メタデータと SSR 状態を設定します。SSR 状態 (window
.__JSS_STATE__
) は、クライアントでアプリの状態をリハイドレートするために使用されます。ルートの初期データを取得するためにレイアウト サービスを呼び出す必要がなくなります。 -
最終的な HTML でレンダリング コールバック関数を呼び出します。
-