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

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

藏色散人

リリース： 2023-01-13 00:45:41

オリジナル

10033 人が閲覧しました

vuejs は js ファイル内のメソッドを呼び出します: 1. アセットファイルの下に新しい js ファイルを作成します; 2. 「export default {...}」を使用して、方法。

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

この記事の動作環境: Windows7 システム、Vue2.9.6 バージョン、DELL G3 コンピューター

vuejs はどのように呼び出しますか? jsファイルのメソッド？

vue で js ファイルを参照する方法

vue の多くのコンポーネントでは、axios を使用してデータをポストし、各コンポーネントは The post で記述されます。そのままコピーする方法もありますが、いつもちょっと不便なので、axiosの投稿を別のjsファイルに書いて、必要なコンポーネント内で参照した方が良いのではないでしょうか？

1. アセットファイルの下に新しい js ファイルを作成します

webpost.js という名前の新しいファイルを作成します

import axios from &#39;axios&#39;
    //Post方法的封装
    function axiosPost(url,params){
        return new Promise((resolve, reject) => {
                axios({
                url: url,
                method: &#39;post&#39;,
                data: params,
                headers: {
                    &#39;Content-Type&#39;:&#39;application/json&#39;
                }
            })
            .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(&#39;哦，对不起，你所输入的用户名或密码有误！&#39;);
}else{
}

ログイン後にコピー

3. もう一つの js の書き方

以下は再編集した部分ですが、ここ数日で axios 部分を整理し、API リクエスト時にトークン検証を行うインターセプタを追加しました。 . エクスポートが一つだけ増えて複数記述できるようになり、構造がより明確になり分かりやすくなりました。

import axios from &#39;axios&#39;
    //Post方法的封装
    export function axiosPost(url,params){
        return new Promise((resolve, reject) => {
                //以下部分是拦截器功能
                axios.interceptors.request.use(config=>{
                    const token=localStorage.getItem(&#39;token&#39;)
                    if(token){
                        config.headers.authorization=token
                    }
                    return config
                },err=>{
                })
                //下面是正常的           
                axios({
                    url: url,
                    method: &#39;post&#39;,
                    data: params,
                    headers: {
                        &#39;Content-Type&#39;:&#39;application/json&#39;
                    }
                })
                .then(res=>{
                    resolve(res.data);
                });
            });
    }

ログイン後にコピー