Getter, Setter

Vue.js의 getter, setter에 대해 알아보도록 합시다.

1. Getter

computed에 만들어놓은 reversedMessage라는 하나의 계산된 데이터는 읽기 전용(Read only)입니다. 즉, 우리가 할당 연산자로 어떤 값을 할당하더라도 반응적으로 동작할 수 있는 구조가 아닙니다. 그러므로 내부의 기본적인 로직을 통해서 값을 얻어낼 수 있는 용도, getter로만 사용이 가능합니다.

<script>
export default {
  computed: {
    // Getter
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
    methods: {
    add() {
      this.reversedMessage += '!?' // 실행되지 않음
    }
  }
}
</script>

2. Setter

이와 달리 data는 getter뿐만 아니라 setter로도 사용할 수 있습니다. 쉽게 말해 값을 읽을 수도 있으며, 여기에 더해 값을 지정할 수도 있습니다.

<script>
export default {
  data() {
    return {
      // Getter, Setter
      msg: 'Hello Computed'
    }
  }
methods: {
    add() {
      this.msg += '!?' // 실행됨
    }
  }
}

3. Computed도 setter가 가능

그러나 Vue.js 문법으로 computed 데이터도 setter 기능이 가능하도록 만들 수 있습니다.

그 방법은 computed 데이터를 메소드 형식으로 만드는 것이 아니라 하나의 객체 데이터를 할당하는 속성으로 만드는 것입니다. 그리고 그 속성 안에 get(), set()메소드로 코드를 작성해주는 겁니다.

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

위와 같이 코드를 작성해주면 되며, getter에는 기본 로직을 추가하면 됩니다. 그리고 setter에는 인수로 들어오는 값을 명시해줄 수 있습니다. 그러므로 위의 set(value)와 같이 매개변수로 이름을 지정해주시면 됩니다.

해당 개념은 일반적으로 잘 활용이 되지는 않으나, Vuex라는 중앙 집중화된 저장소를 다룰 때에 유용하게 사용될 수 있습니다.