[typescript, vue.js]データを取得してからコンポーネントを描画をする

概要

vue.js で create メソッドで hook をしてデータを取得することはよくあると思います。
create メソッド経由でデータを取得すると、まず Component が描画され、それからデータを取得して再度描画する、といったフローになります。
Loading を表示するなり、操作できないようにすればよいのですが、データを取得してから Component を描画したい、といった要求もよくあるかと思います。
この記事はそのような「データを取得してからコンポーネントを描画する」方法についてまとめました。

コード

何はともあれ js を。コード自体は簡単です。

次に ts の場合。

解説

javascript

javascript では beforeRouteEnter というコンポーネント内ガードを利用します。
そのまま記述するだけで Hook ができると思います。
また next を call するまでは次の処理に進みません。
この段階では component 自体はまだ生成されていないため、this などを利用して component にアクセスしようとしても undefined になってしまいます。
これを回避して component にアクセスする場合は next 経由で component にアクセスしてデータを設定します。

typescript

typescript に至っては create メソッドのように、ただ beforeRouteEnter と記述するだけでは Hook できません。
サンプルコードのように Component.registerHook で Hook するメソッドを設定する必要があります。
this 経由でメンバーにアクセスできないのは javascript と一緒です。

その他の hook

beforeRouteEnter 以外の Hook も存在し、beforeRouteUpdate(v2.2 以降 ) と beforeRouteLeave があります。
beforeRouteUpdate は同一コンポーネントで URL の bind 値が変更される場合 (‘/Foo/1’ と ‘/Foo/2’) に Call されます。
beforeRouteLeave はコンポーネントから抜ける時に Call されます。
typescript の場合は Component.registerHook で Hook 指定をしてください。

まとめ

データを取得してからコンポーネントを描画したいなら beforeRouteEnter で Hook します。
コンポーネントを描画してからデータを取得したいなら create で Hook します。
typescript で beforeRouteEnter を使うときは Component.registerHook をする必要があります。