Rumah > hujung hadapan web > View.js > teks badan

Bagaimana untuk memanggil kaedah dalam fail js dalam vuejs

藏色散人
Lepaskan: 2023-01-13 00:45:41
asal
10004 orang telah melayarinya

vuejs memanggil kaedah dalam fail js: 1. Buat fail js baharu di bawah fail aset 2. Gunakan "eksport lalai {...}" untuk merujuknya dalam komponen yang perlu menggunakan kaedah.

Bagaimana untuk memanggil kaedah dalam fail js dalam vuejs

Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer DELL G3

Bagaimana vuejs kaedah panggilan dalam fail js?

Cara merujuk fail js dalam vue

Axios digunakan dalam banyak komponen vue untuk menghantar data, dan setiap komponen ditulis dengan kaedah The post juga boleh, hanya menyalinnya, tetapi ia sentiasa berasa agak menyusahkan, bukankah lebih baik untuk menulis siaran axios ke dalam fail js yang berasingan dan kemudian merujuknya dalam komponen yang diperlukan?

1. Buat fail js baharu di bawah fail aset

Buat fail baharu bernama 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
    }
Salin selepas log masuk

Ini perlu memetik axios secara khusus, iaitu mula-mula OK, dan kemudian anda boleh menggunakannya. Ayat terakhir adalah sangat penting, jika tidak, anda tidak akan dapat memanggil

dalam komponen lain 2. Rujukan

<script>
import {axiosPost} from &#39;../assets/webpost&#39;;
export default {
}
Salin selepas log masuk

dalam komponen yang perlu menggunakan kaedah ini. Nota Laluan yang dirujuk, kandungan dalam import {} ialah kandungan dalam eksport di atas

Apabila menggunakannya, anda tidak memerlukan ini, cuma axiosPost terus

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

3. js Satu lagi cara penulisan

Berikut ialah bahagian yang disunting semula Dalam beberapa hari lalu, saya telah menyusun bahagian axios dan menambah pemintas untuk membawa pengesahan token apabila meminta. api. Hanya ada satu lagi eksport , anda boleh menulis berbilang, strukturnya lebih jelas dan lebih mudah difahami.

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);
                });
            });
    }
Salin selepas log masuk

Disyorkan: "Pilihan tutorial video 5 vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk memanggil kaedah dalam fail js dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!