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
반응형