在普通js文件里引入vue實例的方法

首先是我是寫了一個 Loading 插件然后 是掛在打vue.prototype 原型上的。

 

在main.js中use使用了這個插件。

 

至此vue原型是就被我掛上 $loadding方法了。

然后我想在封裝的axios的http.js文件里使用這個插件。所以我得想辦法把vue實例引進來。

經過測試可以如下這樣。(好吧上面，都是廢話)

 

圖中代碼：

import Vue from 'vue'; //引入vue
//必須實例化 Vue
let vm = new Vue();
/*這里有個點需要注意，直接在這個js文件里，直接使用 console.log(vm),可以看到我在掛到Vue.prototype上的$loading自定義方法，
* 但是在console.log(vm.$loading); 時會顯示 undefined , 輸出vue上的自身方法時，不會顯示undefined。
* 我在網上找到的解釋如下：
* 注意不要在普通js中導入后，直接console.log()，這個時候組件還沒創建肯定是undefined。 （應該是這個http.js在main.js之前加載了）
* 不過我經過經過測試,通過setTimeout()延時輸出時，就不會有 就不會是undefined了。
* 這所說明這個方法不是這個js文件一加載就執行的話，這個這樣通過 import 和 new的方式還是可以用的。
* 正好也可以滿足了我的需求。嘻嘻！！
* */
setTimeout(()=>{
    console.log(vm.$loading); //不是undefined了
},4000);

 

如果不是屬性或方法不是掛到  vue.prototype 原型上時，如上獲取，就會出現文件。解決方法可參考：https://www.cnblogs.com/taohuaya/p/10765731.html

 

 參考文章：

　　1.　　https://segmentfault.com/q/1010000010269801

　　2.　　https://segmentfault.com/q/1010000012327314

　　3.　　https://segmentfault.com/q/1010000011312340