Bagaimana untuk memanggil kaedah dalam fail js dalam vuejs

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.

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
    }

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 {
}

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('哦，对不起，你所输入的用户名或密码有误！');
}else{
}

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 '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);
                });
            });
    }

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!