vuejsでjsファイル内のメソッドを呼び出す方法

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 &#39;../assets/webpost&#39;;
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);
                });
            });
    }

推奨: 「最新の 5 つの vue.js ビデオ チュートリアル セレクション 」

以上がvuejsでjsファイル内のメソッドを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。