快捷導(dǎo)航

vue全局使用axios的方法實(shí)例詳解

更新時(shí)間：2018年11月22日 14:46:03 作者：CodeMan

這篇文章主要介紹了vue全局使用axios的方法實(shí)例詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在vue項(xiàng)目開發(fā)中，我們使用axios進(jìn)行ajax請求，很多人一開始使用axios的方式，會(huì)當(dāng)成vue-resoure的使用方式來用，即在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可將該插件全局引用了，所以axios這樣使用的時(shí)候就報(bào)錯(cuò)了，很懵逼。

仔細(xì)看看文檔，就知道axios 是一個(gè)基于 promise 的 HTTP 庫，axios并沒有install 方法，所以是不能使用vue.use()方法的。☞查看vue插件

那么難道我們要在每個(gè)文件都要來引用一次axios嗎？多繁瑣?。。〗鉀Q方法有很多種：

1.結(jié)合 vue-axios使用
2.axios 改寫為 Vue 的原型屬性
3.結(jié)合 Vuex的action

1.結(jié)合 vue-axios使用

看了vue-axios的源碼，它是按照vue插件的方式去寫的。那么結(jié)合vue-axios，就可以去使用vue.use方法了

首先在主入口文件main.js中引用：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

之后就可以使用了，在組件文件中的methods里去使用了：

getNewsList(){
   this.axios.get('api/getNewsList').then((response)=>{
    this.newsList=response.data.data;
   }).catch((response)=>{
    console.log(response);
   })
}

2.axios 改寫為 Vue 的原型屬性（不推薦這樣用）

首先在主入口文件main.js中引用，之后掛在vue的原型鏈上：

import axios from 'axios'
Vue.prototype.$ajax= axios

在組件中使用：

this.$ajax.get('api/getNewsList')
.then((response)=>{
  this.newsList=response.data.data;
}).catch((response)=>{
  console.log(response);
})

3.結(jié)合 Vuex的action

在vuex的倉庫文件store.js中引用，使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
 // 定義狀態(tài)
 state: {
  user: {
   name: 'xiaoming'
  }
 },
 actions: {
  // 封裝一個(gè) ajax 方法
  login (context) {
   axios({
    method: 'post',
    url: '/user',
    data: context.state.user
   })
  }
 }
})

export default store

在組件中發(fā)送請求的時(shí)候，需要使用 this.$store.dispatch

methods: {
 submitForm () {
  this.$store.dispatch('login')
 }
}

總結(jié)

以上所述是小編給大家介紹的vue全局使用axios的方法實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)自定義視頻和圖片上傳的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何通過Vue實(shí)現(xiàn)自定義視頻和圖片上傳的功能，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-04-04
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
一般做移動(dòng)端輪播圖的時(shí)候，最常用的就是Swiper插件了，而vue.js也有一個(gè)輪播組件vue-awesome-swiper，用法跟swiper相似。接下來通過本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖實(shí)例代碼，需要的朋友參考下
2017-03-03
詳解vue項(xiàng)目打包步驟
這篇文章主要介紹了vue項(xiàng)目打包步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue+elementui 對話框取消表單驗(yàn)證重置示例
今天小編就為大家分享一篇vue+elementui 對話框取消表單驗(yàn)證重置示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue style width a href動(dòng)態(tài)拼接問題的解決
這篇文章主要介紹了vue style width a href動(dòng)態(tài)拼接問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
基于Vue實(shí)現(xiàn)可以拖拽的樹形表格實(shí)例詳解
因業(yè)務(wù)需求，需要一個(gè)樹形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合適的，大部分樹形表格都沒有拖拽功能，所以決定自己實(shí)現(xiàn)一個(gè)。這里分享一下實(shí)現(xiàn)過程,需要的朋友可以參考下
2018-10-10
基于Vue2x的圖片預(yù)覽插件的示例代碼
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05