vuejs调用js文件里面的方法是怎样的

vuejs调用js文件里面的方法是怎样的，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

vuejs调用js文件里面的方法：1、在assets文件下新建一个js文件；2、通过“export default {...}”在需要使用方法的组件中引用即可。

本文操作环境：Windows7系统、Vue2.9.6版，DELL G3电脑

vuejs怎么调用js文件里面的方法？

vue中引用js文件的方法

在vue的很多组件中都会用到axios来Post数据，每个组件中都写上一个post的方法倒是也可以，复制就行了，但是总感觉有些不方便，那么可以把axios的post写到一个单独的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，也就是第一行，然后就可以使用了，最后一句很重要，不然你没法在别的组件中调用

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

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

注意引用的路径，import {}中的内容就是上面export中的内容

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

axiosPost(url,params) .then(res=>{ if (res===401){    this.$message.error('哦，对不起，你所输入的用户名或密码有误！'); }else{ }

3、js的另一种写法

下面是重新编辑的部分，这几天又把axios部分整理了一下，加上了拦截器，用于向api请求时带上token验证，只多了一个export，可以写多个，结构更清晰，更容易理解。

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

关于vuejs调用js文件里面的方法是怎样的问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。