近況
最近、突然無性にやりたくなりNuxt.jsの勉強を始めました！
という訳でノロノロと勉強したメモを放流します。
asyncDataについて
Vue.jsにはdata関数というDOMで扱うプロパティを予め定義しておいてコンポーネント内で使用出来る仕組みがあります。
さらにNuxt.jsには、それを拡張した機能がある模様です。
それが asyncData という訳です。
asyncData は非同期処理を行いSSR(サーバーサイドレンダリング)を行うための関数であるそうな...
DOMの表示速度において優位な仕組みを提供してくれるNuxt.jsの拡張機能という理解をしています📝
例：Qiita APIから一覧を取得する処理
こちらは Nuxt.jsビギナーズガイドp46参照
asyncData関数はVue.jsのmountedとは違いコンポーネントの初期化前に実行されるようです。
その時点ではthisへはアクセス出来ないためasyncDataに格納された情報のうちのアプリケーションに関わる値であるappを利用して以下のコードは処理を行なっています。
<script>
export default {
async asyncData ({ app }) {
const items = await app.$axios.$get('https://qiita.com/api/v2/items?query=tag:nuxt.js')
return {
items
}
}
}
</script>
最後に
Nuxt.jsとRailsを使って個人開発を行いたいと漠然と思っていたので、手始めにNuxt.jsの勉強を開始してみました！
一通り格闘したらなんか作るぞ！！
