Vue - 프로젝트 공통함수 적용하기

1.  공통 js 생성

저의 경우 common.js를 생성하여 assets/js 안에 두었습니다.

함수 생성은 Vue.prototype.$함수명 = function(data){} 와 같은 방식으로 생성할 수 있습니다.

import axios from 'axios'
import config from 'config';

var requestOptions = {
        headers: {
            'Content-Type': 'application/json',
            timeout: 60000
        }
    };

export default{
    install(Vue){
        // ajax post
        Vue.prototype.$post = function (callUrl, postData, succ, fail){
            var URL = `${config.contextRoot}` + callUrl;
            axios.post(URL, postData, requestOptions).then((result) => {
                succ(result.data, this);
            }).catch(e => {
                fail(e, this);
            });
        }


        //이메일 정규식
        Vue.prototype.$emailValidation = function(data){
            var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
            if(regExp.test(data)){
                //통과
                return true;
            }else{
                //올바르지 않음
                return false;
            }
        }

    }
}

2. 공통 js import

공통 함수를 사용하려면 우선 vuex와 VueRouter가 선언되어있어야 합니다. Vue를 생성하는곳에 아래와 같이 import합니다.

import Vuex from 'vuex'
import VueRouter from 'vue-router'
import common from './assets/js/common'

Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(common);

3. 호출 방법

사용하려는 vue 안에서 this.$함수명()으로 사용하시면 됩니다.

//위의 common을 예제로 만든다면 아래와 같습니다.
ex) this.$post(url,param,
                function(req, i){
                	//성공
                },
                function(e, i){
                	//에러
                }
              )
    //이메일 정규식 확인          
    this.$emailValidation(data);