This
您還會注意到要使用您使用的庫，this.libraryName這可能不是一個驚喜，因為它現在是一個實例方法。
但是，這樣做的一個結果是，與全局變量不同，您必須確保在使用庫時處於正確的範圍。在內部回調方法中，你無法訪問this你的library所居住的內容。
胖箭頭回調是確保您保持在正確範圍內的一個很好的解決方案：
this.$http.get('/').then(res=>{
if(res.status!==200){
this.$http.get('/')// etc
// Only works in a fat arrow callback.
}});
為什麼不把它變成一個插件？
如果您打算在很多Vue項目中使用圖書館，或者您想與世界分享，可以將其構建到您自己的插件中！
一個插件將複雜性抽象化並允許您在項目中簡單地執行以下操作來添加您選擇的庫：
importMyLibraryPluginfrom'my-library-plugin';Vue.use(MyLibraryPlugin);
通過這兩行代碼，我們可以像使用Vue Router，Vuex和其他插件一樣，在任何組件中使用該庫Vue.use。
編寫一個插件
首先，為你的插件創建一個文件。在這個例子中，我將創建一個插件，將Axios添加到您的所有Vue實例和組件中，所以我將調用文件axios.js。
要理解的主要事情是插件必須公開一個install方法，該方法將Vue構造函數作為第一個參數：
axios.js
exportdefault{
install:function(Vue){
// Do stuff
}}
現在我們可以使用我們的previos方法將庫添加到原型對象：
axios.js
importaxiosfrom'axios';exportdefault{
install:function(Vue,){
Object.defineProperty(Vue.prototype,'$http',{value:axios});
}}
該use實例方法就是我們現在需要我們的庫添加到項目中。例如，我們現在可以像這樣輕鬆添加Axios庫：
entry.js
importAxiosPluginfrom'./axios.js';Vue.use(AxiosPlugin);newVue({
created(){
console.log(this.$http?'Axios works!':'Uh oh..');
}})
Bonus：插件可選參數
您的插件安裝方法可以採用可選參數。有些開發人員可能不喜歡調用他們的Axios實例方法，$http因為Vue資源通常被賦予了這個名字，所以讓我們使用一個可選參數來允許他們將它改變為他們喜歡的任何參數：
axios.js
importaxiosfrom'axios';exportdefault{
install:function(Vue,name='$http'){
Object.defineProperty(Vue.prototype,name,{value:axios});
}}
entry.js
importAxiosPluginfrom'./axios.js';Vue.use(AxiosPlugin,'$axios');newVue({
created(){
console.log(this.$axios?'Axios works!':'Uh oh..');
}})
閱讀更多 空空教你玩黑客 的文章
關鍵字: 服務器 編程語言 JavaScript
