プロジェクトに必然的にこのようなデータの読み出しなどのいくつかの繰り返し動作、などがあり、これらの操作には、カプセル化することが必要です
1、VUE main.jsページデータで取得したパッケージに(利点:なしインポート操作、これはその後VUEオブジェクト、およびいくつかのカスタム包装作業を取得することができマウント)
main.jsで:
「表示」からインポートビュー
「axios」からインポートAxios
「要素-UI」からインポートElementUI
VARいます。
Vue.prototype.loading =(E)=> {
それ= E。
}
Vue.prototype.getDataは=(URL、PARAMS)=> {
新たな約束((決意、リジェクト)=> {戻り
Axios.get(URL、
{
PARAMS:paramsは
}
)
.then(関数(データ){
data.dataを。 ?データデータ= data.data.data:データ= data.data;
(data.length === 0){場合
Vue.prototype $メッセージ({。
メッセージ: '!暂无数据'、
種類: '警告'
} );
戻り偽;
}
解決(データ)
})
.catch(関数(ERR){
にconsole.log(ERR)
});
})
}
VUEのページ:
{)(マウント
this.loading(この);
this.getData(ここ。$ store.state.Url3 + 'ステーション/ findStationAll')。次に、(データ=> {
にconsole.log(データ)
})
}、
この時点で、データが正常にインターフェースを取得しています
(:ヴューも、オブジェクトVUE後インターフェイスファイル利点のJSにし、いくつかのカスタムパッケージの操作、例えば、取得したデータを取得することができるデータ・ページ上で動作する)2は、外側JS中に封入
JSファイル:
VaRの図です。
輸出ローディングVAR =関数(E){
ビュー=。
}
エクスポートVARのgetData =関数(URL、PARAMS){
Vue.axios.get(URL、
{
paramsは:PARAMS
}
)
.then(関数(データ){
Vue.listData = []; //空の配列
Vue.pages.maxNum = res.total; //ソータの最大数を変更します
?= data.data.data data.data.dataデータ:データ= data.data;
IF(data.length === 0){
Vueのメッセージ$({。
メッセージ: 'データなし!'
タイプ:「警告'
});
falseに戻り;
}
Vue.receiveData(url.substring(Url.lastIndexOf(' /「)+ 1、Url.length。)、データ); //戻る戻り値を区別するために使用されるインタフェースのアドレス
})
.catch (関数(ERR){
にconsole.log(ERR)
});
}
VUEファイル:
インポート{ローディング、のgetData} ../../../static/js/main'から
方法:{
//取得したデータ
のgetData(){
PARAMSを= {せ
パラメータは//渡さ
};
のgetData(+ store.state.Url3この$ '駅/ findStationAll'」、PARAMS。);
}、
//データ受信
receiveData(URL、データ){
もし(URL === 'findStationAll'){
console.log(データ)//データを取得
}
}
}、
(){搭載
; //目標噴射VUE機能ローディング(本)
this.getDataを();
}