[Vue.js] Class로 구성된 js 파일 import, 사용하기

모듈화를 하기 위해 class로 구성하는 외부 js 파일의 사용이 필요할 때가 생겼다.

파일 구성은

export defualt class foo {
	constructor() {
    	this.func();
    }
    
    func() {
    }
    
    fun2() {
    }
}

Vue에서 파일을 따로 빼내서 vue 파일에서 사용할 경우 내보내기(export)를 꼭 해야한다

원하는 Vue파일에서 해당 파일 import를 하고 사용해야 한다

<script>
import foo from "foo.js 경로"

export defult {
	data() {
    	return {
        	foo : new foo();
        }
    },
    mounted() {
    	this.foo.fun2();
    }
}

class 파일에서 정의한 메소드가 꼭 mounted가 아니라 method에서 호출해도 되고 created에서 호출해도 된다. 호출하는 방식을 예시를 든 것이다.