Maison > interface Web > Voir.js > le corps du texte

Comment appeler des méthodes dans des fichiers js dans vuejs

藏色散人
Libérer: 2023-01-13 00:45:41
original
10024 Les gens l'ont consulté

vuejs appelle la méthode dans le fichier js : 1. Créez un nouveau fichier js sous le fichier d'actifs ; 2. Utilisez "export default {...}" pour le référencer dans le composant qui doit utiliser la méthode.

Comment appeler des méthodes dans des fichiers js dans vuejs

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur DELL G3

Comment vuejs appelle-t-il la méthode dans le fichier js ?

Comment référencer des fichiers js dans vue

Dans de nombreux composants de vue, axios est utilisé pour publier des données. Il est normal d'écrire une méthode de publication dans chaque composant, mais cela donne toujours l'impression que c'est un. peu pratique, il ne serait donc pas préférable d'écrire la publication axios dans un fichier js séparé, puis de le référencer dans les composants requis.

1. Créez un nouveau fichier js sous le fichier d'actifs

Créez un nouveau fichier nommé 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
    }
Copier après la connexion

Cela doit citer spécifiquement axios, qui est la première ligne, et vous pouvez ensuite l'utiliser. très important, sinon vous ne pouvez pas l'appeler dans d'autres composants

2. Référencez-le dans le composant qui doit utiliser cette méthode

<script>
import {axiosPost} from &#39;../assets/webpost&#39;;
export default {
}
Copier après la connexion

Faites attention au chemin de la référence. Le contenu de l'import {} est le contenu de l'export. ci-dessus

Lors de son utilisation, même cela Pas besoin, juste axiosPost

axiosPost(url,params)
.then(res=>{
if (res===401){
   this.$message.error(&#39;哦,对不起,你所输入的用户名或密码有误!&#39;);
}else{
}
Copier après la connexion

3. Une autre façon d'écrire js

Ce qui suit est la partie rééditée Au cours des derniers jours, j'ai trié la partie axios et ajoutée. un intercepteur pour envoyer des messages à l'API Apportez une vérification du jeton lors de la demande, il n'y a qu'une seule exportation de plus, vous pouvez en écrire plusieurs, la structure est plus claire et plus facile à comprendre.

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);
                });
            });
    }
Copier après la connexion

Recommandé : "Les 5 dernières sélections de didacticiels vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal