Getter, Setter

원래의 Getter, Setter

<template>
  <button @click="add">
    ADD
  </button>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      // Getter, Setter
      // 값을 지정해서 사용할 수 있음
      msg: 'Hello Computed!!'
    }
  },
  computed: {
    // 읽기 전용, 값을 얻어내는 용도로만 사용한다!
    // Getter
    reversedMessage() {
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    add(){
      // this.reversedMessage += '!?'
      this.msg += '!?'
    }
  }
}
</script>

<style>

</style>

• computed는 읽기 전용으로 값을 얻어내는 용도(Getter)로만 사용한다. 하지만 vue문법을 통해 Setter로 사용할 수 있다.

Setter 사용

<template>
  <button @click="add">
    ADD
  </button>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      // Getter, Setter
      // 값을 지정해서 사용할 수 있음
      msg: 'Hello Computed!!'
    }
  },
  computed: {
    // // 읽기 전용, 값을 얻어내는 용도로만 사용한다!
    // // Getter
    // reversedMessage() {
    //   return this.msg.split('').reverse().join('')
    reversedMessage: {
      get() {
        return this.msg.split('').reverse().join('')
      },
      set(newValue) {
        this.msg = newValue
      }
    }
  },
  methods: {
    add(){
      this.reversedMessage += '!?'
    }
  }
}
</script>

<style>

</style>

add 클릭 시 기존 메세지에 !?가 붙는 모습을 볼 수 있다.
Vuex를 다룰 때 유용하게 활용 가능하다.