nuxt.js是基于vue的服務(wù)器端渲染框架，它使得基于vue的SPA應(yīng)用變得非常簡(jiǎn)單。axios是當(dāng)下最熱門的ajax前后端數(shù)據(jù)交互庫。那么如何在nuxt.js中使用axios?

安裝axios

npm install @nuxtjs/axios

配置axios

nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
}

使用axios

組件中

<template>
 <div class="index">
     {{ articleList }}
 </div>
</template>

<script>
export default {
 async asyncData({ app }){
   //獲取文章列表數(shù)據(jù)
   let article = await app.$axios.get(`http://localhost:3000/article/list`)
   return {articleList: article.data.data}
 }
 methods: {
   async fetchSomething() {
     const res = await this.$axios.get('http://localhost:3000/article/list')
     this.data = res
   }
 }
}
</script>

Store中

async nuxtServerInit ({ commit }, { $axios }) {
  const ip = await $axios.$get('http://icanhazip.com')
  commit('SET_IP', ip)
}

{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$axios.$get('http://icanhazip.com')
      commit('SET_IP', ip)
    }
  }
}