Nuxt.js 安裝自帶的axios，修改head标題title,關鍵詞,描述，渲染資料NuxtJS中使用axios，Nuxt封裝axios請求

axios官方位址：​​https://axios.nuxtjs.org/setup​​

​​async-data​​​官方位址：​​https://www.nuxtjs.cn/guide/async-data​​

模拟資料

JsonData.json

檔案放在 static/js/JsonData.json

{
  "head": {
    "title": "第一個測試程式",
    "keywords": "第一個測試程式的關鍵詞",
    "description": "第一個測試程式的描述"
  },
  "list": [
    {
      "name": "雲飛",
      "age": 21
    },
    {
      "name": "蕾蕾",
      "age": 22
    },
    {
      "name": "俊俊",
      "age": 23
    },
    {
      "name": "甜甜",
      "age": 24
    },
    {
      "name": "糖糖",
      "age": 25
    }
  ]
}      

第一步：安裝

npm install @nuxtjs/axios      

第二步：nuxt.config.js設定

modules: ['@nuxtjs/axios']
axios: {}      

您現在可以在Nuxt應用中使用​​$​​ axios 

​

​uxt.config.js​

​以配置将應用于所有請求的全局選項

 第三步：執行

html

<h1>新的</h1>
        <h3>IP：{{ip}}</h3> 
        <h3>title:{{title}}</h3> 
        <ul>
          <li v-for="(data,index) in list" :key="index">{{data.name}}+index:{{index}}</li>
        </ul>      

js

<script>

export default {
//async asyncData({ $axios }) { 
//let data = await $axios.$get('/js/JsonData.json');  
// const seo=data.head;
//var list=data.list;
//return {seo,list}
//},
async asyncData({app}) {
  const $axios = app.$axios;  
  let data = await $axios.$get('/js/JsonData.json');  
    const seo=data.head;
    var list=data.list;
    return {seo,list}
},
  data() { 
    return {
      title: "首頁", 
      ip: '0.0.0.0',
      list:[]
    }
  },
  head() {
    return {
      title: this.seo.title+'_'+this.title,
      meta: [
        { hid: 'keywords', name: 'keywords', content: this.seo.keywords },
        { hid: 'description', name: 'description', content: this.seo.description }
      ]
    }
  },

}
</script>      

有時候會報錯，可以把上面的asyncData替換成

async asyncData({app}) {
   const $axios = app.$axios;  
  const data= await $axios.$get('/js/JsonData.json')
  console.log(data)
},      

 方法調用時

let data = this.$axios.$get('./js/JsonData.json');  
console.log(data.head)      

* 注意常量的使用

效果

seo

清單

進階：

NuxtJS中使用axios，Nuxt封裝axios請求