mutations

๋ฎคํ…Œ์ด์…˜(mutations)์€ ๋ทฐ์—‘์Šค์—์„œ ์ƒํƒœ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ƒํƒœ๋Š” ํ•ญ์ƒ ๋ฎคํ…Œ์ด์…˜์œผ๋กœ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.

mutations ์„ ์–ธ

๋ฎคํ…Œ์ด์…˜์„ ์„ ์–ธํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

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

์œ„ ์ฝ”๋“œ๋Š” ๋ฎคํ…Œ์ด์…˜์˜ reverseMessage() ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ message ์ƒํƒœ ๊ฐ’์„ ์—ญ์ˆœ์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

mutations ํ˜ธ์ถœ

์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฎคํ…Œ์ด์…˜์„ ํ˜ธ์ถœํ•˜๋ ค๋ฉด commit() API๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.




ย 




new Vue({
  methods: {
    reverseMsg() {
      this.$store.commit('reverseMessage');
    }
  }
})

์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ reverseMsg() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋ฐ”๋กœ reverseMessage() ๋ฎคํ…Œ์ด์…˜์ด ํ˜ธ์ถœ๋˜๋ฉด์„œ ์ƒํƒœ ๊ฐ’์ด ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

๋ฎคํ…Œ์ด์…˜์˜ ๊ฐœ๋…์€ methods ์†์„ฑ๊ณผ ๋งค์นญ๋ฉ๋‹ˆ๋‹ค. ๋ฉ”์„œ๋“œ ์˜ˆ์ œ ์ฝ”๋“œ์™€ ์œ„์˜ ์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•ด๋ณด์„ธ์š”.