getters

getters 속성은 computed 속성과 λ§€μΉ­λ˜λŠ” 기술 μš”μ†Œμž…λ‹ˆλ‹€. μƒνƒœ(state) 값이 λ³€κ²½λ˜μ—ˆμ„ λ•Œ 변화에 λ”°λ₯Έ 차이λ₯Ό μžλ™μœΌλ‘œ λ°˜μ˜ν•˜μ—¬ 값을 κ³„μ‚°ν•΄μ€λ‹ˆλ‹€.

getters μ„ μ–Έ

getters 속성은 λ‹€μŒκ³Ό 같이 μ •μ˜ν•©λ‹ˆλ‹€.

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  },
  getters: {
    reverseMessage(state) {
      return state.message.split('').reverse().join('');
    }
  }
})

μœ„ μ½”λ“œλŠ” reverseMessage λΌλŠ” getters 속성을 μ„ μ–Έν•˜μ—¬ μƒνƒœ κ°’ message의 λ¬Έμžμ—΄ μˆœμ„œλ₯Ό 거꾸둜 λ’€μ§‘λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

getters μ ‘κ·Ό

getters 속성은 μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ•„λž˜μ™€ 같이 μ ‘κ·Όν•©λ‹ˆλ‹€.

<div>{{ this.$store.getters.reverseMessage }}</div>

μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ 화면에 sj.euV olloeHκ°€ 좜λ ₯λ©λ‹ˆλ‹€.

아직 감이 μ•ˆμž‘νžˆμ‹ λ‹€λ©΄ computed의 예제 μ½”λ“œμ™€ μœ„μ˜ μ½”λ“œλ₯Ό λΉ„κ΅ν•΄λ³΄μ„Έμš”.