반응형
250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 콜백함수
- sort
- 이벤트리스너
- slice
- 자바스크립트recude
- 객체리터럴
- 자바스크립트객체리터럴
- Blazor
- 인터넷프로토콜
- 틱택토구현
- 인프런강의
- 인프런무료강좌
- 인프런인강
- 코딩
- .NET
- 인프런강좌
- 자바스크립트파라미터
- 인프런
- 자바스크립트
- 비주얼스튜디오
- HTTP
- EntityFramework
- NPM
- 객체의비교
- 제로초
- 인프런자바스크립트
- 고차함수
- c#
- 자바스크립트함수
- 자바스크립트틱택토
Archives
- Today
- Total
샐님은 개발중
Vuex #4 ACTIONS 사용 본문
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
반응형
'vue > vue기초' 카테고리의 다른 글
Vue Router #1 라우터 기초 (0) | 2021.09.23 |
---|---|
Vuex #3 MUTATIONS 사용 (0) | 2021.09.12 |
Vuex #1 state (0) | 2021.09.12 |
#7.vue기초 형제 컴포넌트로 데이터 전달(event bus) (0) | 2021.09.01 |
#6.vue기초 자식 ->부모 컴포넌트로 데이터 전달(. $emit) (0) | 2021.09.01 |