vuejs에서 js 파일의 메소드를 호출하는 방법

vuejs는 js 파일에서 메소드를 호출합니다. 1. 자산 파일 아래에 새 js 파일을 생성합니다. 2. 메소드를 사용해야 하는 구성 요소에서 이를 참조하려면 "export default {...}"를 사용합니다.

이 기사의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터

vuejs는 js 파일에서 메소드를 어떻게 호출합니까?

vue에서 js 파일을 참조하는 방법

vue의 많은 구성 요소에서 axios는 데이터를 게시하는 데 사용됩니다. 각 구성 요소에 게시 메서드를 작성하는 것은 괜찮지만 항상 그런 느낌입니다. 약간 불편하므로 axios 게시물을 별도의 js 파일에 작성한 다음 필수 구성 요소에서 참조하는 것이 더 좋지 않을까요?

1. 자산 파일 아래에 새 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 &#39;../assets/webpost&#39;;
export default {
}

참조 경로에 주의하세요. import {}의 내용은 내보내기의 내용입니다. 위

사용시 이것도 필요없이 그냥 axiosPost

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

3. js를 작성하는 또 다른 방법

다음은 며칠간 다시 편집한 부분입니다. API로 전송하기 위한 인터셉터 요청할 때 토큰 확인을 가져오면 내보내기가 하나만 더 있고 여러 개 작성할 수 있으며 구조가 더 명확하고 이해하기 쉽습니다.

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개 vue.js 비디오 튜토리얼 선택"

​

위 내용은 vuejs에서 js 파일의 메소드를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!