[vue] plugin, vue 공통함수 쓰기

Vue에서는 공통함수를 쓸때 plugin이라는 것을 사용한다.

 

https://vuejs.org/guide/reusability/plugins.html#writing-a-plugin

Plugins | Vue.js

 

Vue의 plugin으로 라이브러리를 달아주면 vue의 전역에서 등록되므로, 어디에서든 바로 사용할 수 있다.

 

Cmmn.js라는 파일에 공통함수를 만들고 export하자

//cmmn.js
export default {
	myFunc1(){ return "hello" };
	...
}

이 js파일을 plugin으로 만들어주는 cmmnPlugin.js를 작성한다.

//cmmnPlugin.js
import { cmmn } from "@/js/cmmn.js"

export default {
    install : (app) => {
        app.config.globalProperties.$cmmn = cmmn;
    }
}

이 플러그인을 앱이 시작하는 main.js에서 플러그인으로 달아준다.

import { createApp } from 'vue'
import App from './App.vue'

import cmmnPlugin from './js/cmmnPlugin.js';


const app = createApp(App);
app.use(cmmnPlugin);
app.mount('#app');

 

이제 component에서 아래와 같이 사용할 수 있다.

//MyComponent.js
export default {
    mounted() {
        console.log(this.$cmmn.myFunc1()) //hello
    },
}

 

$표시는 Vue에서 사용하는 관습으로, 전역을 나타낸다. 이 스타일을 따라서 $cmmn으로 공통함수를 달아주었다.

private은 _로 표시한다.

 

VueRouter나 Vuex같은 것들도 모두 이렇게 플러그인으로 개발되었다.

 

options

import { createApp } from 'vue'
import App from './App.vue'

import cmmnPlugin from './js/cmmnPlugin.js';


const app = createApp(App);
app.use(cmmnPlugin, {greet : "hello"});
app.mount('#app');

app.use의 두번째인자로 options를 넘겨줄 수 있다.

 

//cmmnPlugin.js
import { cmmn } from "@/js/cmmn.js"

export default {
    install : (app, options) => {
        app.config.globalProperties.$cmmn = cmmn;
        app.provide("cmmn", options)
    }
}

받은 options는 provide로 넘겨주어 component에서 직접적으로 접근하게 할 수 있다.

//MyComponent.js
export default {
	inject : ['cmmn'],
    mounted() {
    	console.log(this.cmmn.greet) // hello
    },
}

 

provide와 inject에 대한 설명은 아래 참고

2022.07.12 - [javascript] - [vue] provide와 inject 알아보기

[vue] provide와 inject 알아보기