mutation (vuex)

state값을 변화시키는 역할을 하는 mutation

*주의* mutation은 동기로 동작한다. 

 

왜 필요한지?

 

store내에서 state를 변화시키는 같은 기능을 하는 함수를 mutations에 넣고

그 mutations을 각각 컴포넌트에 commit을 해서 state값을 변경한다. 

mutations을 불러오기만 하면 되니까 코드가 간결해질 수 있다. 

commit: 바꾸겠다는 의사를 밝힘

 

 

//store.js


export default new Vuex.Store({
  state: {//data
    allUsers:[
      {userId: 'hoza123', password: '123', name: 'Hoza', address: 'Seoul', src:'https://goo.gl/oqLfJR'},
      {userId: 'max123', password: '456', name: 'Max', address: 'Berlin', src:'https://goo.gl/Ksk9B9'},
      {userId: 'lego123', password: '789', name: 'Lego', address: 'Busan', src:'https://goo.gl/x7SpCD'}
    ]
  },
  getter: 
    allUsersCount : state => {return state.allUsers.length},
    countOfSeoul: state => {
      let count = 0
      state.allUsers.forEach((user) =>{ 
        if(user.address === 'seoul') count++
      })
      return count
    },
    percentOfSeoul: (state, getters) => {
      return Math.round(getters.countOfSeoul / getters.allUsersCount * 100)
    }
  },
  mutations: {
    addUsers: (state, payload) => {
      //payload: 가져온 값을 넘겨주는 역할
      state.allUsers.push(payload)
    }
  },
})

state: 변화시키는 값

payload: 각각의 값들을 받아서 state에 전달시켜줌 

 

* 만일 addUsers라는 mutations이 일어나면 payload가 추가되어 state값을 바꿔준다. 

 

//SingUp.vue


<script>
import { EventBus } from '@/main.js'
import {mapMutations} from 'vuex';
  export default {
  ...
    methods: {
      ...mapMutations(['addUsers']),
      signUp() {
        let userObj = {
          userId: this.userId,
          password: this.password,
          name: this.name,
          address: this.address,
          src: this.src
        }
        // EventBus.$emit('signUp', userObj)
        this.addUsers(userObj)
        this.clearForm()
      },
    }
  }
</script>

mapMutations는 실행해줄 함수이기에  methods안에 넣어준다.

array형태로 불러오고, this.addUsers()로 선언된 함수처럼 사용할 수 있다. 

userObj라는 payload를 받아서 state값을 변경한다. 

 

 

 

mapMutation을 사용하지 않고 commit을 사용할 때는?

 methods: {
      // ...mapMutations(['addUsers']),
      signUp() {
        let userObj = {
          userId: this.userId,
          password: this.password,
          name: this.name,
          address: this.address,
          src: this.src
        }
        // this.addUsers(userObj)
        this.$store.commit('addUsers', userObj)
        this.clearForm()
      },

commit이라는 함수는 mutations을 실행시킨다는 약속이다.

this.$store.commit(mutation이름, payload)