【Nuxt.js】nuxt/axiosを導入しよう

前置き

Nuxtで安全に、
そして簡単にaxiosを使えるものです✨
導入方法と
使い方を載せていきます❤️✍️

以前ご紹介したこちらは
公式の書き方$axiosを使用しておりませんでした。
申し訳ございません。
書き方は違いますが、
axiosとは何か、どういうことができるのかは
ぜひこちらを参考にしてください。
【Nuxt.js】axios導入編：かんたん・お手軽API通信

🔼の記事の書き方でもできましたが、
本来の使い方として
今回の記事を参考にしていただければと思います…🙏

導入方法

Setup

terminal

$ npm install @nuxtjs/axios

nuxt.config.jsで設定💫
オプションについてはこちら
Options

export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    // Axios options here
  },
}

export default {

modules: ['@nuxtjs/axios'],

axios: {

// Axios options here

}

$axiosで簡単に使えるようになりました👏

使い方

Usage

$axiosで使用できます。
使い方自体は非常にシンプルですね🍀
asyncDataやVuexを理解していれば
サンプルコードのような物は
簡単に書けると思います✍️

コンポーネント内

当ブログではおなじみの
JSONPlaceholderのResources
/postsを取得・表示しています🌱

asyncData

<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

<script>
export default {
  async asyncData ({ $axios }) {
    const posts = await $axios.$get('https://jsonplaceholder.typicode.com/posts')
    return { posts }
  },
}
</script>

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

async asyncData ({ $axios }) {

const posts = await $axios.$get('https://jsonplaceholder.typicode.com/posts')

return { posts }

}

</script>

.page {

}

</style>

methods/created/mounted/etc

<template>
  <div class="page">
    <button @click="getData">
      getData
    </button>
    {{ posts }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      posts: [],
    }
  },
  methods: {
    async getData () {
      const posts = await this.$axios.$get('https://jsonplaceholder.typicode.com/posts')
      this.posts = posts
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
}
</style>

getData

</button>

</div>

</template>

export default {

data () {

return {

posts: [],

}

methods: {

async getData () {

const posts = await this.$axios.$get('https://jsonplaceholder.typicode.com/posts')

this.posts = posts

}

</script>

.page {

}

</style>

store内

<template>
  <div class="page">
    {{ posts }}
  </div>
</template>

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

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

computed: {

posts () {

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

async fetch ({ store }) {

await store.dispatch('axios/getData')

}

</script>

.page {

}

</style>

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

export const getters = {
  posts: state => {
    return state.posts
  }
}

export const actions = {
  async getData ({ commit }) {
    const posts = await this.$axios.$get('https://jsonplaceholder.typicode.com/posts')
    commit('setData', posts)
  },
}

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

export const state = () => ({

posts: [],

})

export const getters = {

posts: state => {

return state.posts

}

export const actions = {

async getData ({ commit }) {

const posts = await this.$axios.$get('https://jsonplaceholder.typicode.com/posts')

commit('setData', posts)

}

export const mutations = {

setData (state, posts) {

state.posts = posts

}

まとめ

axios自体はシンプルですね💡
optionsについては触れていませんが、
proxyなどの記事を出して
それと合わせて解説を追加してもよいなぁ
と考えています🤔💭