pageディレクトリ
.vueファイルは、一つのページを指しており、これを「ページコンポーネント」と呼びます。
追加する属性
Nuxt.jsでは、ユニバーサルアプリケーションを作成するために下記のように.vueファイルに独自の属性を追加します。
| 属性 | 説明 |
|---|---|
| asyncData | コンポーネントのロード毎に実行されます。Vuexストアのデータを使わずにデータを取得し、レンダリングの事前処理を行います。 |
| fetch | ページがレンダリングされる前に、データをストアに入れるために使用されます。 |
| head | ページに対して、メタタグを設定（headタグ内の設定）するために使用されます。 |
| layout | layoutを指定するために使用されます。 |
| transition | ページ特定のトラジションを指定するために使用されます。（ページコンポーネントの遷移時の動きについて定義できる。） |
| scrollToTop | ページのレンダリング時に、一番上までスクロールするか否かを設定します。 |
| validate | 動的なルーティングをするための検証関数を設定できます。 |
| middleware | ページのレンダリング時に実行するミドルウェアを指定します。 |
asyncDataの使い方
asyncDataの具体的な使い方については下記の記事で解説しています。
コンテキストオブジェクト
Nuxt.jsのページコンポーネントで使用するオブジェクトになります。
主に使用される場所は下記になります。
- asyncDataメソッドの第一引数
- fetchメソッドの第一引数
- layoutメソッドの第一引数
- ミドルウェアとして定義した関数の第一引数
上記のような場所で、コンテキストオブジェクトを通じてデータ更新を行うことができます。
コンテキストオブジェクトの一覧
| コンテキストオブジェクト名 | 説明 |
|---|---|
| app | Vueインスタンスのルートオブジェクト、全てのプラグインにここからアクセスします。 |
| isClient | クライアントでレンダリングされたらtrueになります。 |
| isServer | サーバーサイドでレンダリングされたらtrueになります。 |
| isStatic | アプリケーションが静的ジェネレータで出力されたらtrueになります。 |
| isDev | 開発モードで実行されたらtrueになります。 |
| isHMR | Webpackのホットモジュールで出力されたらtrueになります。 |
| route | vue-routerのインスタンス |
| store | Vuexのストアオブジェクト |
| env | nuxt.config.jsに定義したenvオブジェクトを参照できる。 |
| params | routeオブジェクトのparamsのエイリアス |
| query | routeオブジェクトのqueryのエイリアス |
| req | http.Request、Node.jsのリクエスト、静的ジェネレータで出力した場合は存在しません。 |
| res | http.Response、Node.jsのレスポンス、静的ジェネレータで出力した場合は存在しません。 |
| redirect | リダイレクトのための関数。他のルートにリダイレクトさせたい場合は、redirect(status,path,params)でリダイレクトさせる。 |
| error | エラーページを表示させるための関数。error(message,statusCode)で実行させます。 |
fetchとは？
ページがレンダリングされる前に、データをstoreに入れるために使用されます。
fetch関数
第一引数にコンテキストを受け取り、コンテキストを使用してstoreに入れます。
コンテキストについては、下記の記事で解説しています。
fetchの利用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <section> <h1>sample</h1> {{$store.state.msg}}</section> </template> <script> export default{ fetch ({store, params}){ return axios.get('http://xxx').then(() => { store.commit('setMsg', {msg: res.msg}) }); } } </script> |
layout
layoutには下記2通りの使い方ができます。
- 文字列でlayoutを指定する。
- 関数でコンテキストオブジェクトを受け取り、動的に定義をする。
構文
|
1 2 3 4 5 6 7 8 9 |
<script> export default{ //静的なレイアウト layout: 'test', layout (context){ //動的に返す。 return 'test' }} </script> |
この記事へのコメントはありません。