vuejs は js ファイル内のメソッドを呼び出します: 1. アセット ファイルの下に新しい js ファイルを作成します; 2. 「export default {...}」を使用して、方法。
この記事の動作環境: Windows7 システム、Vue2.9.6 バージョン、DELL G3 コンピューター
vuejs はどのように呼び出しますか? jsファイルのメソッド?
vue で js ファイルを参照する方法
vue の多くのコンポーネントでは、axios を使用してデータをポストし、各コンポーネントは The post で記述されます。そのままコピーする方法もありますが、いつもちょっと不便なので、axiosの投稿を別のjsファイルに書いて、必要なコンポーネント内で参照した方が良いのではないでしょうか?
1. アセット ファイルの下に新しい js ファイルを作成します
webpost.js という名前の新しいファイルを作成します
import axios from 'axios' //Post方法的封装 function axiosPost(url,params){ return new Promise((resolve, reject) => { axios({ url: url, method: 'post', data: params, headers: { 'Content-Type':'application/json' } }) .then(res=>{ resolve(res.data); }); }); } export { axiosPost }
これは、最初の行である axios を具体的に引用する必要があります最後の文は非常に重要です。そうしないと、他のコンポーネントで
を呼び出すことができなくなります。 2. これを使用する必要があるコンポーネントで
<script> import {axiosPost} from '../assets/webpost'; export default { }
を参照します。メソッドです。参照のパスに注意してください。インポート {} の内容は、上記のエクスポートの内容です。
使用する場合は、これも必要なく、axiosPost だけで済みます。
axiosPost(url,params) .then(res=>{ if (res===401){ this.$message.error('哦,对不起,你所输入的用户名或密码有误!'); }else{ }
3. もう一つの js の書き方
以下は再編集した部分ですが、ここ数日で axios 部分を整理し、API リクエスト時にトークン検証を行うインターセプタを追加しました。 . エクスポートが一つだけ増えて複数記述できるようになり、構造がより明確になり分かりやすくなりました。
import axios from 'axios' //Post方法的封装 export function axiosPost(url,params){ return new Promise((resolve, reject) => { //以下部分是拦截器功能 axios.interceptors.request.use(config=>{ const token=localStorage.getItem('token') if(token){ config.headers.authorization=token } return config },err=>{ }) //下面是正常的 axios({ url: url, method: 'post', data: params, headers: { 'Content-Type':'application/json' } }) .then(res=>{ resolve(res.data); }); }); }
以上がvuejsでjsファイル内のメソッドを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。