[Vuex] mutations

mutations

📌 state値を変更するロール
📌 各コンポーネントに同じ機能の関数を生成し、それらを組み合わせると、効率が向上します.
📌 突然変異を各構成部分で発生させる行為をコミットと呼ぶ.

📌 突然変異の基本的な使用方法

// 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>

📌 mapMutationを使用せずにコミットすることによって変異を実行する方法

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

❗突然変異の問題:突然変異のすべての機能は同期されている.従って,非同期論理はactionsとして用いられる.