【Nuxt.js】Nuxt文法編：created

前置き

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

created()

created()とは

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

Vuexでいうならactionsにあたる部分です❣️
Vuexを使用する際は
actionsをcreated()内で
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

<template>
  <div class="page">
    <p id="text">Hello Nuxt.js!</p>
  </div>
</template>

<script>
export default {
  created () {
    document.getElementById("text").style.color = "lightblue"
  },
}
</script>

<p id="text">Hello Nuxt.js!</p>

</div>

</template>

export default {

created () {

document.getElementById("text").style.color = "lightblue"

}

</script>

mounted()

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

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

コード

) pages

<template>
  <div class="page">
    <p id="text">Hello Nuxt.js!</p>
  </div>
</template>

<script>
export default {
  mounted () {
    document.getElementById("text").style.color = "lightblue"
  },
}
</script>

<p id="text">Hello Nuxt.js!</p>

</div>

</template>

export default {

mounted () {

document.getElementById("text").style.color = "lightblue"

}

</script>

API通信をしてみる

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

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

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

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

Vuexなしver.

コード

) pages

<template>
 <div class="page">
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      posts: [],
    }
  },
  created () {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then ((res) => {
        this.posts = res.data
      })
  }
}
</script>

<ul>

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

data () {

return {

posts: [],

}

created () {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then ((res) => {

this.posts = res.data

})

}

</script>

Vuexありver.

コード

) pages

<template>
 <div class="page">
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
 </div>
</template>

<script>
export default {
  created () {
    this.$store.dispatch('getData')
  },
  computed: {
    posts () {
      return this.$store.getters['posts']
    },
  },
}
</script>

<ul>

</li>

</ul>

</div>

</template>

export default {

created () {

this.$store.dispatch('getData')

computed: {

posts () {

return this.$store.getters['posts']

}

</script>

) file

import axios from 'axios'

export const state = () => ({
  posts: [],
})

export const getters = {
  posts(state) {
    return state.posts
  },
}

export const actions = {
  getData({ commit }) {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((res) => {
        let resData = res.data
        commit('setData', resData)
      })
  }
}

export const mutations = {
  setData(state, resData) {
    state.posts = resData
  },
}

import axios from 'axios'

export const state = () => ({

posts: [],

})

export const getters = {

posts(state) {

return state.posts

}

export const actions = {

getData({ commit }) {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then((res) => {

let resData = res.data

commit('setData', resData)

})

}

export const mutations = {

setData(state, resData) {

state.posts = resData

}

まとめ

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