vuejs調(diào)用js文件里面的方法是怎樣的

vuejs調(diào)用js文件里面的方法是怎樣的，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

vuejs調(diào)用js文件里面的方法：1、在assets文件下新建一個js文件；2、通過“export default {...}”在需要使用方法的組件中引用即可。

本文操作環(huán)境：Windows7系統(tǒng)、Vue2.9.6版，DELL G3電腦

vuejs怎么調(diào)用js文件里面的方法？

vue中引用js文件的方法

在vue的很多組件中都會用到axios來Post數(shù)據(jù)，每個組件中都寫上一個post的方法倒是也可以，復(fù)制就行了，但是總感覺有些不方便，那么可以把a(bǔ)xios的post寫到一個單獨(dú)的js文件中，然后在需要的組件中引用豈不是更好嗎。

1、在assets文件下新建一個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，也就是第一行，然后就可以使用了，最后一句很重要，不然你沒法在別的組件中調(diào)用

2、在需要使用此方法的組件中引用

<script>
import {axiosPost} from '../assets/webpost';
export default {
}

注意引用的路徑，import {}中的內(nèi)容就是上面export中的內(nèi)容

使用的時候連this都不需要了，直接axiosPost就可以了

axiosPost(url,params)
.then(res=>{
if (res===401){
   this.$message.error('哦，對不起，你所輸入的用戶名或密碼有誤！');
}else{
}

3、js的另一種寫法

下面是重新編輯的部分，這幾天又把a(bǔ)xios部分整理了一下，加上了攔截器，用于向api請求時帶上token驗(yàn)證，只多了一個export，可以寫多個，結(jié)構(gòu)更清晰，更容易理解。

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

關(guān)于vuejs調(diào)用js文件里面的方法是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。