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

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

创新互联建站主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、营销推广、网站程序开发、HTML5响应式重庆网站建设公司、手机网站制作、微商城、网站托管及网站维护公司、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为公路钻孔机行业客户提供了网站改版服务。

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文件里面的方法是怎样的问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

标题名称：vuejs调用js文件里面的方法是怎样的
链接分享：https://www.cdcxhl.com/article2/pcesic.html

成都网站建设公司_创新互联，为您提供定制网站、手机网站建设、网站维护、服务器托管、域名注册、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联