Computed Getter, Setter 예제

주로 Vuex(Store, 중앙 집중식 저장소)를 사용할 때 활용된다.

 

기본적인 Computed 기능은 읽기전용인 Getter 기능으로만 사용가능하지만

computed 내의 get(), set() 메소드를 이용하여 Getter, Setter 기능을 사용할 수 있다.

 

지난번에 게시물을 사용하여 예제 코드를 작성하였다.

 

버튼을 클릭하면 문자열을 추가해주는 예제

App.vue

<template>
  <!-- button을 클릭하게 되면 add 메소드가 호출된다. -->
  <button @click="add">
    add
  </button>
  <!-- 문자를 배열로 한문자씩 쪼개고 다시 붙여서 출력 -->
  <h1>{{ msg.split('') }}</h1>
  <h1>{{ msg.split('').reverse() }}</h1>
  <h1>{{ msg.split('').reverse().join('') }}</h1>
  <!-- 함수로 선언 -->
  <h1>{{ reverseMessage() }}</h1>
  <!-- 데이터와 같이 사용 -->
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      // Getter, Setter
      msg: 'Hello Computed!'
    }
  },
  // 계산된 데이터를 반복적으로 사용할 수 있다.  
  computed: {
    // 읽기전용(getter)
    // reversedMessage() {
      // 캐싱된 데이터로 이미 연산이 된 데이터를 반환한다.
      // return this.msg.split('').reverse().join('')
    // }

    // Getter, Setter 기능을 수행하도록 computed 설정
    reversedMessage: {
      get () {
        return this.msg.split('').reverse().join('')
      },
      set (value) {
        this.msg = value
        console.log('value: ' + value);
        console.log('msg: ' + this.msg);
      }
    }
  },
  methods: {
    reverseMessage() {
      return this.msg.split('').reverse().join('')
    },
    add() {
      // computed 로 계산된 데이터는 수정이 불가능하다.
      // this.reversedMessage += '!?'
      // this.msg += '!?'

      // computed에 선언한 set 명령어 사용하기
      // 선언한 set() 명령어가 호출된다.
      this.reversedMessage += '!?'

    }
  }
}
</script>