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

藏色散人
リリース: 2023-01-13 00:45:41
オリジナル
10021 人が閲覧しました

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 '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(&#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);
                });
            });
    }
ログイン後にコピー

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート