Vue.js) Getter, Setter

1. Getter, Setter

Vue.js Computed 속성에는 Getter와 Setter가 있습니다. 이 기능은 데이터를 기반으로 값을 계산하고, 필요에 따라 값을 설정하는 데 유용합니다. 

// 기본 형태
computed: {
	example: {
    	get() {
        	return this.data; 		// data 속성에 정의한 값
        },
        set(newVal) {
        	this.data = newVal;		// data 속성에 정의한 값에 newVal(새로운 값)을 설정
        },
    },
},

 

2. 사용 예제

<template>
	<h4>{{ reversedMessage }}</h4>
	<h4>{{ reversedMessage }}</h4>
	<h4>{{ reversedMessage }}</h4>
	<h4>{{ reversedMessage }}</h4>
	<button v-on:click="add">Add</button>
</template>

<script>
export default {
	data() {
		return {
			// Getter, Setter
			msg: 'Hello Computed!',
		};
	},
	computed: {
		// Getter, Setter
		reversedMessage: {
			get() {
				return this.msg.split('').reverse().join('');
			},
			set(newVal) {
				this.msg = newVal;
			},
		},
	},
	methods: {
		add() {
			this.reversedMessage += '!?';
		},
	},
};
</script>

위 예시는 reversedMessage를 뒤집어 가져오고(get()), Add 버튼을 누르면 methods 속성의 add() 함수를 호출하여 reversedMessage에 '!?'를 추가하여 값을 설정(set()) 합니다.

 

 

Getter와 Setter 방식은 일반적인 경우에는 잘 사용하지 않지만 이후에 Vuex라는 중앙 집중식 저장소를 다룰 때 유용하게 사용됩니다.

 

참고 문서:

https://v2.ko.vuejs.org/v2/guide/computed.html