ํ—ฌํผ ํ•จ์ˆ˜

ํ—ฌํผ ํ•จ์ˆ˜๋Š” ๋ทฐ์—‘์Šค ๊ธฐ์ˆ  ์š”์†Œ๋“ค์„ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋” ํŽธํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” API์ž…๋‹ˆ๋‹ค. ์–ผ๋งˆ๋‚˜ ๋” ํŽธํ•ด์ง€๋Š”์ง€ ์ผ๋ฐ˜์ ์ธ ์‚ฌ์šฉ ๋ฐฉ์‹๊ณผ ํ—ฌํผ ํ•จ์ˆ˜์˜ ์‚ฌ์šฉ ๋ฐฉ์‹์„ ๋น„๊ตํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์ธ getters ์ ‘๊ทผ ๋ฐฉ๋ฒ•

reverseMessage๋ผ๋Š” getters ์†์„ฑ์„ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ ‘๊ทผํ•˜๋ ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

<div>{{ this.$store.getters.reverseMessage }}</div>
export default {
  computed: {
    reverseMessage() {
      return this.$store.getters.reverseMessage;
    }
  }
}

ํ—ฌํผ ํ•จ์ˆ˜์˜ ์‚ฌ์šฉ ๋ฐฉ์‹

์ด๋ฅผ ์ข€ ๋” ํŽธํ•˜๊ฒŒ ์ ‘๊ทผํ•˜๋ ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<div>{{ reverseMessage }}</div>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['reverseMessage'])
  }
}

์œ„์˜ ...๋Š” ES6์˜ Spread Operator๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ—ฌํผ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ๋ฌด์กฐ๊ฑด ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. mapGetters()๋Š” ์Šคํ† ์–ด์˜ getters ์†์„ฑ์„ this.$store.getters.... ์ด๋Ÿฐ ์‹์œผ๋กœ ์ ‘๊ทผํ•˜์ง€ ์•Š ๊ณ  ๋ฐ”๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

ํ—ฌํผ ํ•จ์ˆ˜์˜ ์ข…๋ฅ˜

๋ทฐ์—‘์Šค์˜ ๊ธฐ์ˆ  ์š”์†Œ ์ „๋ถ€ ํ—ฌํผ ํ•จ์ˆ˜๋ฅผ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(),
    ...mapGetters()
  },
  methods: {
    ...mapMutations(),
    ...mapActions(),
  }
}

mapState์™€ mapGetters๋Š” computed ์†์„ฑ์— ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๊ณ , mapMutations์™€ mapActions๋Š” ๋ฉ”์„œ๋“œ์— ์ฃผ๋กœ ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค.