Vuex #3 MUTATIONS 사용

MUTATIONS : state 값을 변화 시킴. 변이

store.js

  mutations: {
	addUsers:(state,payload)=>{ //payload 가져온 값을 넘겨주는 역할
		state.allUsers.push(payload)
	}

signup.vue

1.mapMutations 를 import 시켜서 씀.

<script>
import { EventBus } from '@/main.js'
import { mapMutations } from 'vuex' <!--1. mapMutaitons import시킴 -->
  export default {
    data() {
      return {
        userId: null,
        password: null,
        name: null,
        address: null,
        src: null
      }
    },
    methods: {
    ...mapMutations(['addUsers']) <!--2. store의 mutations에 선언된 함수 가져옴 -->
      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) <!--3.userObj  객체 즉 payload를 변수로 들고가서 함수 실행시킴 -->
        this.clearForm()
      },
      clearForm() {
        this.userId = null,
        this.password = null,
        this.name = null,
        this.address = null,
        this.src = null
      }
    }
  }
</script>

signup.vue

2. $store.commit(함수 이름,인자)로 바로 호출 가능하다.

      this.$store.commit('addUsers',userObj)