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

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

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

vue中引用js文件的方法

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

1、在assets文件下新建一個(gè)js文件

新建一個(gè)名稱為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     }

這個(gè)需要專門引用一下axios，也就是第一行，然后就可以使用了，最后一句很重要，不然你沒法在別的組件中調(diào)用

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

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

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

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

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

3、js的另一種寫法

下面是重新編輯的部分，這幾天又把a(bǔ)xios部分整理了一下，加上了攔截器，用于向api請(qǐng)求時(shí)帶上token驗(yàn)證，只多了一個(gè)export，可以寫多個(gè)，結(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);                 });             });     }

推薦：《最新的5個(gè)vue.js視頻教程精選》