大綱

• 安裝
• vue-axios 全域使用
• 結合 Vuex action 使用

安裝

  npm i --save axios
  npm i vue-axios 

vue-axios 方法

• 寫於 main.js
• 元件中 使用 this.axios

  // 於 main.js 引用
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  Vue.use(VueAxios, axios)

  // 於 元件 生命週期中 使用 axios api call
  mounted() {
    this.axios.get('http://localhost:3000/users')
      .then((res) => { console.table(res.data) })
      .catch((error) => { console.error(error) })

    this.axios({
      method: 'get',
      baseURL: 'http://localhost:3000',
      url: '/users',
      'Content-Type': 'application/json',
    })
      .then((result) => { console.log(result.data) })
      .catch((err) => { console.error(err) })
  },

Vuex action & axios 實體

• 寫於 store.js
• Why use axios 實體

  //  引入 Vuex store.js
  import axios from 'axios'
  
  // 建立 axios 實體 統一管理 config
  const userRequest = axios.create({
    baseURL: 'http://localhost:3000',
    headers: { 'Content-Type': 'application/json' },
  })
  
  // store.js  action 撰寫 api call
  actions: {
    getUsers() { return userRequest.get('/users') },
  },

  // 元件生命週期中 使用 dispatch 呼叫該 api
  created(){
    this.$store.dispatch('getUsers')
      .then((result) => { console.table(result.data) })
      .catch((err) => { console.error(err) })
  }

參考資料

• vue全域性使用axios的方法