こちらの記事はvue.jsのライフサイクルを理解した上で読んでいただくとより一層理解が深まると思います。以下の記事を参考にしてください。
Nuxtのライフサイクルを理解する
下の画像がnuxtのライフサイクルになっています。公式から拝借しました。
- nuxtServerInit
- middleware
- validate
- asyncData / fetch
これらは全て満遍なく使用するのでしっかりと理解を深めましょう。
それでは、それぞれ見ていきましょう。
nuxtServerInit
サーバーサイドに限り
実行されます。主にサーバーサイド
からクライアントサイド
に直接渡したいデータがあるときに使用します。
※サーバーサイドでしか実行されないのでSPAモードにしていると動きません。
ではSPAモードではどうするのが良いのか。それはnuxtClientInit
を使いましょう。こればこちらにまとまっておきましたのでそちらを見てください。
使用方法
nuxtServerInit
はstore/index.js
のaction
で使用します。
サーバーサイドから直接データをstoreにセットしたいときなどに使用します。
例として、サーバーサイドでセッションを持っていて、接続しているユーザーに req.session.user を通じてアクセスできるとします。認証されたユーザーにストアを渡すために store/index.js 下記のように書き換えます。
actions: {
nuxtServerInit ({ commit }, { req }) {
if (req.session.user) {
commit('user', req.session.user)
}
}
}
middleware
severMiddlewareとしてexpress.jsを使っている場合もここで呼ばれます。 図では省略していますが、クライアントサイドでnuxt-linkをクリックして遷移したときは、ここまで戻って実行されます。
middlewareは主にユーザー認証に使用します。
ミドルウェアは middleware/ ディレクトリ
に入れます。 ファイル名がミドルウェアの名前となります(middleware/auth.js
は auth ミドルウェア
になります)
ユニバーサルモードの場合
ミドルウェアはサーバサイドでは一度だけ呼び出され(Nuxt アプリケーションへの最初のリクエスト時、またはページの再読込み時)クライアントサイドでは他のルートへ移動したときに呼び出されます。
SPA モードの場合
ミドルウェアはクライアントサイドで最初のリクエスト時と他のルートへ移動したときに呼び出されます。
以下に公式の例を示します。
middleware/authenticated.js:
ミドルウェアは第一引数として コンテキスト を受け取ります:
export default function ({ store, redirect }) {
// ユーザーが認証されていないとき
if (!store.state.authenticated) {
return redirect('/login')
}
}
pages/secret.vue
<template>
<h1>シークレットページ</h1>
</template>
<script>
export default {
middleware: 'authenticated'
}
</script>
また、特定のページにだけミドルウェアを使いたい場合、関数または配列の関数を直接使うことができます。
pages/secret.vue:
<template>
<h1>Secret page</h1>
</template>
<script>
export default {
middleware ({ store, redirect }) {
// ユーザーが認証されていないとき
if (!store.state.authenticated) {
return redirect('/login')
}
}
}
</script>
ミドルウェアを使った実際の例を見たい場合は GitHub 上にある example-auth0 を参照してください。
validate
Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。
何をバリデートするかというと、
validate({ params, query, store }) {
return true // params バリデーションを通過したとき
return false // Nuxt.js がルートをレンダリングするのを中止して、エラーページを表示させる
}
async validate({ params, query, store }) {
// await の処理
return true // params バリデーションを通過したとき
return false // Nuxt.js がルートをレンダリングするのを中止して、エラーページを表示させる
}
バリデーションメソッドが true を返さないときは Nuxt.js は自動的に 404 エラーページをロードします。
プロミスを返すこともできます:
validate({ params, query, store }) {
return new Promise((resolve) => setTimeout(() => resolve()))
}
ルートのパラメータに対してバリデーションをかけたいときは、
export default {
validate ({ params }) {
// 数値でなければならない
return /^\d+$/.test(params.id)
}
}
さらに、storeに対してバリデートをかけたいときは、
export default {
validate ({ params, store }) {
// `params.id` が存在している category の id なのか否かをチェックする
return store.state.categories.some(category => category.id === params.id)
}
}
想定したエラーや想定外のエラーを投げることもできます!!便利!!
export default {
async validate ({ params, store }) {
// 500 internal server error とともにカスタムメッセージを投げる
throw new Error('Under Construction!')
}
}
asyncData / fetch
こちらは別の記事にまとめておいたのでそちらをご覧ください。
まとめ
ライフサイクルを理解することで開発のイメージが湧くかと思います。
NUXTはドキュメントが綺麗にまとまりすぎているので、ドキュメントの内容が多くなってしまいますが、自分なりに理解するのも大事だと思ったのでまとめて見ました。
NUXTにはまだまだ便利な機能があるので、次はそちらを紹介したいと思います。