How to use Axios in Nuxt?

用例子解說在 Nuxt 專案中操作。

▍使用狀況

目前有兩個例子，第一個是點選不同會員我要根據 route 上的 params 來 post api。

route params is 1

第二個是我要在很多頁使用 Tabs，但是每次要更新 Tabs 時都要改很多地方，所以統一把它們放在 store 統一管理。

把處理 tabs 的程式模組出來

▍設定 nuxt.config.js

前提是你專案必須裝 Axios。

modules: [
    '@nuxtjs/axios'
],
axios: {
    // proxyHeaders: false
    baseURL: 'http://localhost:3000/'
},

nuxt.config.js settings

▍例子１：在一般 vue 檔中使用

先看看原始碼

export default {
  async asyncData(context) {
    const mb = await context.$axios.$get(
      `/data/youtuber0${context.params.id}.json`
    );
    return { mb };
  }
}

這裡使用 Nuxt 的 asyncData，在 vue 渲染 component data 之前取得 ajax 資料。

asyncData 參數帶 context，可以用 console.log(context) 出來看看，可以看到裡面很多參數可以用。

console.log(context)

所以這邊我使用 context.params.id 來取的 url 上的 params。

當然如果想用 ES6 的解構也可以， async asyncData({params}) { ... } 。

最後 return { mb } ，然後 template 中可以愉快的使用它， {{ mb.name }} 。

▍例子２：在 Vuex 中使用

一樣先來看看原始碼

• index.vue

export default {
  async fetch({ store }) {
    await store.dispatch("tabs/GET_TABS_DATA");
  },
  computed: {
      tabsData() {
        return this.$store.state.tabs.tabsData;
      }
    },
  }
}

• store/tabs.js

export const state = () => ({
  tabsData : null
})
export const mutations = {
  SET_TABS_DATA(state, data) {
    // Save tab Data
    state.tabsData = data
  }
}
export const actions = {
  async GET_TABS_DATA({commit}) {
    const tabsData = await this.$axios.$get('/data/tabsData.json')
    commit('SET_TABS_DATA', tabsData)
  }
}

在 tabs.js 中的 actions，GET_TABS_DATA 透過 axios 用來取的 tabs 所需資料，把資料存在 tabsData 變數，然後調用 commit 提交給 mutations 的SET_TABS_DATA 去改變 state 的資料。

這樣 store 的程式就寫完了，接著要調用它，在 index.vue 中使用 fetch 方法來呼叫， store.dispath("tabs/GET_TABS_DATA") 。

如果使用 asyncData 方法來呼叫也是可以！

喜歡文章的話可以拍幾下手給我一點回饋！🙏 讓我在寫作上更有動力！😎