Vueと共通

【Nuxt.js】Nuxt文法編:created

前置き

ライフサイクルフックの1つcreated()
似ていると言われるmounted()との違いや
使い方を解説していきます🍎🙋‍♀️


created()

created()とは

API通信を行うものです🔄
基本はcreated()を使用し、
どうしてもDOMを操作しないといけない時に
mounted()を使います💡

Vuexでいうならactionsにあたる部分です❣️
Vuexを使用する際は
actionscreated()内で
dispatchを使って呼び出すこともできます。


実行タイミング

インスタンス作成後、
マウンティング前(DOMが作られる前)
https://jp.vuejs.org/v2/api/#created

つまり
$elプロパティや
getElementByIdなどのDOM操作は使えず、
thisコンテキストは使えます🍒


比較

まずはAPIを使わず
簡単なコードで比較しましょう👀

テキストを表示させるだけ🌟


created()

DOM操作ができないので
エラーになります。

Error

TypeError: Cannot read property 'style' of null
at VueComponent.created

コード

) pages


mounted()

$elが有効なので
問題なく表示されます。

※SSRの場合はmounted()自体が使えません❗️

コード

) pages


API通信をしてみる

それではcreated()でAPI通信をしましょう。
通信にはaxios
APIはJSONplaceholderを使用します。

JSONplaceholder
お試しAPIです。
ダミーデータですが本格的にAPIを使う前に
動作確認ができるのでオススメです🌟
まずはここから始めましょう📚✨

axiosについて、
JSONplaceholderの取得は
こちらで解説しています。
https://wp.me/pc9NHC-gr

JSONplaceholderのデータを取得をし、
liで表示させます。


Vuexなしver.

コード

) pages


Vuexありver.

コード

) pages

) file


まとめ

  • created()はAPI通信を行うもの
  • Vuexのactionsにあたる部分
  • monted()との使い分けは$el, DOM操作が必要かどうか

-Vueと共通
-,

© 2020 aLiz Nuxt