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์˜ ์˜ˆ์ œ ์ฝ”๋“œ์™€ ์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•ด๋ณด์„ธ์š”.