在vue專案開發中,我們使用axios進行ajax請求,很多人一開始使用axios的方式,會當成vue-resoure的使用方式來用,即在主入口檔案引入import vueresource from 'vue-resource'之後,直接使用vue.use(vueresource)之後即可將該外掛程式全域性引用了,所以axios這樣使用的時候就報錯了,很懵逼。
仔細看看文件,就知道axios 是乙個基於 promise 的 http 庫,axios並沒有install 方法,所以是不能使用vue.use()方法的。☞檢視vue外掛程式
那麼難道我們要在每個檔案都要來引用一次axios嗎?多繁瑣!!!解決方法有很多種:
1.結合 vue-axios使用
2.axios 改寫為 vue 的原型屬性
3.結合 vuex的action
看了vue-axios的原始碼,它是按照vue外掛程式的方式去寫的。那麼結合vue-axios,就可以去使用vue.use方法了
首先在主入口檔案main.js中引用:
import axios from 'axios'
import vueaxios from 'vue-axios'
vue.use(vueaxios,axios);
之後就可以使用了,在元件檔案中的methods裡去使用了:
getnewslist()).catch((response)=>)
}
首先在主入口檔案main.js中引用,之後掛在vue的原型鏈上:
import axios from 'axios'
vue.prototype.$ajax= axios
在元件中使用:
this.$ajax.get('api/getnewslist')
.then((response)=>).catch((response)=>)
結合 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(
},actions: )
}}})
export default store
在元件中傳送請求的時候,需要使用 this.$store.dispatch
methods:
}
vue全域性使用axios的方法
在vue專案開發中,我們使用axios進行ajax請求,很多人一開始使用axios的方式,會當成vue resoure的使用方式來用,即在主入口檔案引入import vueresource from vue resource 之後,直接使用vue.use vueresource 之後即可將該外掛程式...
vue全域性使用axios的方法
axios 是乙個基於 promise 的 http 庫,axios並沒有install 方法,所以是不能使用vue.use 方法 結合 vue axios使用 axios 改寫為 vue 的原型屬性 結合 vuex的action 看了vue axios的原始碼,它是按照vue外掛程式的方式去寫的。...
vue專案中axios的全域性使用方法
我是跟著上面這句話這個思路去往下想的 vue文件中開發外掛程式的文件 如果想寫乙個vue外掛程式,該外掛程式需要有個公開方法install,這個方法的第乙個引數是 vue 構造器,第二個引數是乙個可選的選項物件 var myplugin 物件才能點方法 myplugin.install functi...