[Vuex] mutations

mutations

📌 state값을 변경시키는 역할
📌 각각의 components에서 같은 기능을 하는 함수를 mutations내 만들고 묶어주면 훨씬 효율적이다.
📌 mutations을 각각의 components에서 실행시키는 행위를 commit이라고 한다.

📌 mutations 기본 사용방법

// store/index.js
mutations: {
 // state 값을 받아와야하기때문에 state 인자로 추가
 // 넘겨받은 값을 받을 수 있는 인자값 payload 추가
  addUsers: (state, payload) => {
    state.allUsers.push(payload)
  }
}

// components/xxx.vue
<script>
  import { mapMutations } from 'vuex'
  
  export default {
    methods: {
      ...mapMutations(['addUsers']),
      signUp() {
        // 여기에서 넘겨준 'abc' 가 store/index.js의 payload로 감
        this.addUsers('abc')
    }
  }
</script>

📌 mapMutations을 사용하지않고 commit을 통해 mutations을 실행시키는 방법

// components/xxx.vue
<script>  
  export default {
    methods: {
      signUp() {
      // commit으로 actions 실행
      // mutations 이름 'addUsers' 써줌
      // payload로 'abc' 넘겨줌
      this.$store.commit('addUsers', 'abc')
      }
  }
</script>

❗ mutations의 문제점 : mutations은 모든 기능이 동기로 동작한다. 그러므로 비동기 로직은 actions로 사용한다.