Nuxt.js + TypeScript でページネーションが必要な一覧ページでのページング処理の実装方法について解説します。

Nuxt.jsでTypeScriptを利用する方法は以下のページを参考にしてください。
https://ja.nuxtjs.org/guide/typescript/

前提

今回の記事も参考ページにあるnuxt-property-decoratorの使用をしています。

インストール

decoratorでの書き方

nuxt-property-decoratorの使用をしている場合、
依存コンポーネントを@Componentで読み込むことができます。
サンプルではBarComponent.vueを依存コンポーネントとして読み込んでいます。

propsは@Propで定義でき、サンプルではidnumというpropsを定義しています。
また、@PropのオプションはVueのpropで指定可能なオプションは全て網羅されています。
prop(Vue公式ドキュメント)
(2019年8月現在、Nuxt.js + TypeScriptは素の状態での型チェックが甘いため、オプションを指定することをお勧めします。)

stateはclassの直下にプロパティとして定義します。
(この文法はES2015のClassではなくTypeScriptのClassでのみ定義されています。)
サンプルではflagというデフォルト値falseのものとnameArrayという文字列の配列をstateとして定義しています。

MethodやLifeCycle MethodはClassのメソッドとして定義します。
サンプルではLifeCycle Methodとしてmountedを定義し、mounted時にconsole上にmounted !と出力するように定義しています。
また、MethodとしてalertErrorを定義し、こちらは実行された際にエラーが発生しました。とアラートされるように定義しています。

nuxt-property-decoratorの基本的な使い方が確認できたら本題のページネーションの実装を見ていきましょう。 

実際のコード例

次のページへの遷移

サンプルでは、<nuxt-link >というコンポーネントを用いて他ページへのリンクを作成しています。
こちらは、toで指定したpathへリンクするaタグ要素となるのでCSSなどで見た目のカスタマイズが行えます。

nuxt-link(公式ドキュメント)

APIからのデータ取得

このページではasyncDataメソッドでapiからデータの取得を行っています。
asyncDataはSSRが行われるタイミングで実行されるようになっています。

しかし、Queryのみ更新された場合はasyncDataの再度呼び出しはされないため、
呼び出されるように設定を行う必要があります。

asyncData(公式ドキュメント)

asyncDataが再度呼び出されるようにwatchQueryを設定する。

watchQueryで指定したqueryが更新された時に全てのコンポーネントメソッドを再実行するようになります。
(asyncData、fetch、validate、layoutなど)
また、default.vueで<nuxt :nuxt-child-key="$route.fullPath" />を指定しないと再レンダリングされない場合があるようなので忘れずに指定します。

watchQuery(公式ドキュメント)

ちなみに

nuxt-property-decoratorを使用しない場合は、以下のようになります。

まとめ

  • asyncDataやfetchメソッドを使用している時、そのままではQueryの更新で再度メソッドの呼び出しは行われない。
  • Queryの監視を行いたい場合は、watchQueryを設定する。