관리 메뉴

샐님은 개발중

Vuex #4 ACTIONS 사용 본문

vue/vue기초

Vuex #4 ACTIONS 사용

샐님 2021. 9. 12. 10:00
728x90
반응형

store.js

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

  },
  actions: {
/*	addUsers: context =>{
		context.commit('addUsers') //mutation 실행
	}*/
	addUsers: ({commit},payload) =>{
		//context,payload
		//{commit},payload -> context를간단하게 써줌
		commit('addUsers')
	}
  }

signup.vue

    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.$store.commit('addUsers') */
     this.$store.dispatch('addUsers',userObj)
        this.clearForm()
      },
      clearForm() {
        this.userId = null,
        this.password = null,
        this.name = null,
        this.address = null,
        this.src = null
      }
    }
  }

this.$store.dispatch -> actions를 호출하는 방법

actions를 쓰는 이유는 비동기 로직을 위한것이다. 반대로 muations는 동기

 

728x90
반응형