[Vue Dev History] Filter 전역 처리

---

Vue 개발 중 공부내용을 기록하는 포스트 입니다.

---

개요

---

Vue 에서 제공하는 filter 의 기능은 Vue2 에서는 유용하게 쓰이고 있다.

실제 실무에서도 사용하는 편이나, Vue3 로 버전업이 되면서 Composition API 를 사용하기 위해서 computed 로 대체해서 사용하길 공식문서에서 권장하고 있다.

아직까지는 Vue2 에서 사용하능한 기능이고 GlobalProperty 를 통해 마이그레이션해서 Vue3에서 사용하는 방법이 공식문서에 자세히 작성되어 있다.

filter 기능 전역으로 빼기

---

filter 기능을 전역으로 빼는 방법이 있다.

예를들어, 아래와 같이 특정 Component에서 filters 를 통해 날짜를 필터링 한다고 해보자.

<script>
<template>
	<div>
		
	</div>
</template>
import { deletePost } from '@/api/posts';
export default {
	props: {
		postItem: {
			type: Object,
			required: true,
		},
	},
	filters: {
		formatDate(value) {
			return new Date(value);
		},
	},
	methods: {
		async deleteItem() {
			if (confirm('You want to delete it?')) {
				const response = await deletePost(this.postItem._id);
				this.$emit('refresh');
				console.log(response);
			}
		},
		routeEditPage() {
			const id = this.postItem._id;
			this.$router.push(`/post/${id}`);
		},
	},
};
</script>

Vue에서 제공하는 Filter 기능을 통해 진행하면 되지만 여러 Component에서 공통으로 사용하기 위해 하는 방법을 기록한다.

먼저 Utils즉, 유틸과 관련된 폴더에 filters.js와 같이 담당하는 파일을 하나 만든다.

// 필터 관련 함수가 존재하는 파일
export function formatDate(value) {
	const date = new Date(value);
	const year = date.getFullYear();
	let month = date.getMonth() + 1;
	month = month > 9 ? month : `0${month}`;
	const day = date.getDate();
	let hours = date.getHours();
	hours = hours > 9 ? hours : `0${hours}`;
	const minutes = date.getMinutes();
	return `${year}-${month}-${day} ${hours}:${minutes}`;
}

그리고 실제 전역에서 사용하게 하기 위해 main.js 에서 위 파일을 import하여 Vue에 추가한다.

import Vue from 'vue';
import App from './App.vue';
import router from '@/router/router';
import store from '@/store/store';
import { formatDate } from '@/utils/filters';

Vue.filter('formatDate', formatDate);
Vue.config.productionTip = false;

new Vue({
	render: h => h(App),
	router,
	store,
}).$mount('#app');

전역으로 설정을 해 놓았으므로 아래와 같이 선언 없이도 사용할 수 있다.

<script>
<template>
	<div>
		
	</div>
</template>
import { deletePost } from '@/api/posts';
export default {
	props: {
		postItem: {
			type: Object,
			required: true,
		},
	},
	methods: {
		async deleteItem() {
			if (confirm('You want to delete it?')) {
				const response = await deletePost(this.postItem._id);
				this.$emit('refresh');
				console.log(response);
			}
		},
		routeEditPage() {
			const id = this.postItem._id;
			this.$router.push(`/post/${id}`);
		},
	},
};
</script>

참고 사이드

• Vue 공식문서