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> |
この記事へのコメントはありません。