【Nuxt.js】Nuxt文法編：fetch

前置き

非同期通信に使えるfetchをご紹介🌟

APIからデータを取得する方法は2つ！
fetch
asyncData

2つの違いについても解説しました🎀👩‍🏫

⬇️asyncDataの記事はこちら

【Nuxt.js】Nuxt文法編：asyncData

asyncDataとの違い

値のセット先が違う

asyncData：直接コンポーネントにセット
fetch：Vuexのstoreに格納📦

呼び出されるタイミングが違う

asyncData：インスタンス作成前
fetch：インスタンス作成後

The Nuxt.js fetch hook is called after the component instance is created on the server-side: this is available inside it.
https://ja.nuxtjs.org/guides/features/data-fetching/

【翻訳】
Nuxt.jsフェッチフックは、
サーバー側でコンポーネントインスタンスが
作成された後に呼び出されます。
これは、その内部で使用できます。

違いはこれくらいです！
他はほとんど変わりません🌟

基本的にはasyncDataと同じ

使い方・書き方

asyncDataとほとんど一緒です👌
Promiseを返すか
async/awaitを使うかです💡
詳しい書き方はasyncDataの記事をご覧ください👀

thisが使えない

thisを通してコンポーネントのインスタンスに
アクセスすることができません💥

使用箇所

pages内コンポーネントのみ使用可能

fetch

fetchとは

asyncDataとの違いにも書きましたが
API通信の結果をVuexのstoreに格納するものです🧸

公式ガイドはこちら
https://ja.nuxtjs.org/api/pages-fetch/

簡単な使い方

JSONPlaceholderを表示させるだけ
https://jsonplaceholder.typicode.com/posts

axiosを使うのでinstallします📥
axiosの解説はこちら
https://wp.me/pc9NHC-gr

terminal

$ npm install --save @nuxtjs/axios

解説

syncDataと一緒ですね❣️
Promiseを返すか
async/awaitを使うかです。

今回はasync/awaitを使用しました。
awaitがPromiseの役割をしています。

こちらについてもasyncDataで
解説しているので、ご確認ください👀
https://wp.me/pc9NHC-ut

コード

極力コードを最小限にするために
v-forなどは使わず、
gettersも使わずstoreを直接呼び出しています！

) pages

<template>
  <div class="page">
    <p>{{ $store.state.jsonData }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async fetch ({ store }) {
    let { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    store.commit('setData', data)
  }
}
</script>

<p>{{ $store.state.jsonData }}</p>

</div>

</template>

import axios from 'axios'

export default {

async fetch ({ store }) {

let { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')

store.commit('setData', data)

}

</script>

) file

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

export const mutations = {
  setData(state, data) {
    state.jsonData = data
  },
}

export const state = () => ({

jsonData: [],

})

export const mutations = {

setData(state, data) {

state.jsonData = data

}

リスト化した場合

今度は先ほどのJSONPlaceholderの
titleだけをリスト化してみます🌟

コード

) pages

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

<script>
import axios from 'axios'

export default {
  computed: {
    jsonData () {
      return this.$store.getters['jsonData']
    },
  },
  async fetch ({ store }) {
    let { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
    store.commit('setData', data)
  }
}
</script>

<ul>

<li

v-for="data in jsonData"

:key="data.id"

</li>

</ul>

</div>

</template>

import axios from 'axios'

export default {

computed: {

jsonData () {

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

async fetch ({ store }) {

let { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')

store.commit('setData', data)

}

</script>

) file

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

export const getters = {
  jsonData: state => {
    return state.jsonData
  },
}

export const mutations = {
  setData(state, data) {
    state.jsonData = data
  },
}

export const state = () => ({

jsonData: [],

})

export const getters = {

jsonData: state => {

return state.jsonData

}

export const mutations = {

setData(state, data) {

state.jsonData = data

}

paramsを使用した場合

JSONPlaceholder
今度はこちらを動的ルーティングと
paramsを使用して取得してみます🌟
https://jsonplaceholder.typicode.com/posts/1

ここのtitleだけ表示させてみます💡
ul>liの必要がないのでpタグで表示させます。

解説

動的ルーティングのため
index.vueではなく_id.vueを使用
contextにparamsとrouteを追加
url部分はテンプレートリテラル
`(バッククオート)の中に ${変数} を使って記載
使わない場合は
'(シングルクオート) の中に + $route.params.idを連結

コード

) pages

<template>
  <div class="page">
    <p>{{ jsonData.title }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  computed: {
    jsonData () {
      return this.$store.getters['jsonData']
    },
  },
  async fetch ({ store, params, route }) {
    let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${route.params.id}`)
    console.log(data)
    store.commit('setData', data)
  }
}
</script>

<p>{{ jsonData.title }}</p>

</div>

</template>

import axios from 'axios'

export default {

computed: {

jsonData () {

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

async fetch ({ store, params, route }) {

let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${route.params.id}`)

console.log(data)

store.commit('setData', data)

}

</script>

) file

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

export const getters = {
  jsonData: state => {
    return state.jsonData
  },
}

export const mutations = {
  setData(state, data) {
    state.jsonData = data
  },
}

export const state = () => ({

jsonData: [],

})

export const getters = {

jsonData: state => {

return state.jsonData

}

export const mutations = {

setData(state, data) {

state.jsonData = data

}

まとめ

使い方はasyncDataと同じ
違いは値のセットの仕方と呼び出されるタイミング