vuex 의 mutation 과 action 의 기본 사용
돌연변이
vue 에 서 는 mutation 만 state 를 바 꿀 수 있 습 니 다. mutation 유사 한 이벤트 입 니 다.모든 mutation 에는 하나의 유형 과 하나의 처리 함수 가 있 습 니 다.mutation 만 state 를 바 꿀 수 있 기 때문에 처리 함 수 는 기본 매개 변수 state 를 자동 으로 얻 을 수 있 습 니 다.유형 이란 이름 입 니 다.action 은 하나의 mutation 을 커밋 합 니 다.어떤 mutation 을 지정 해 야 하기 때문에 mutation 은 최소한 하나의 이름 이 필요 합 니 다.commt mutation 이후 에 무슨 일 을 하려 면 처리 함 수 를 지정 해 야 합 니 다.형식(이름)+처리 함 수 는 mutation 을 구성 합 니 다.현재 test.js 에 mutation 을 추가 합 니 다.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 1
increment(state) {
state.count++;
},
// 1
decrement(state) {
state.count--
}
}
})
Vue 는 mutation 형식 을 대문자 상수 로 표시 하고,mutation 형식 을 대문자 로 바 꾸 는 것 을 권장 합 니 다.
mutations: {
// 1
INCREMENT(state) {
state.count++;
},
// 1
DECREMENT(state) {
state.count--
}
}
행동action 은 commt mutations 를 제거 하기 때문에 action 을 정의 해 야 합 니 다.test.js 에 actions 를 추가 합 니 다.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 1
INCREMENT(state) {
state.count++;
},
// 1
DECREMENT(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit("INCREMENT");
},
decrement(context) {
context.commit("DECREMENT");
}
}
})
action 과 mutions 의 정의 방법 은 유사 합 니 다.dispatch 는 action 을 해 야 합 니 다.그래서 actions 는 이름 이 있 을 것 입 니 다.dispatch action 후에 일 을 해 야 합 니 다.바로 commt mutation 이기 때문에 함 수 를 지정 해 야 합 니 다.commt mutation 을 사용 해 야 하기 때문에 함수 도 기본 매개 변수 context 를 자동 으로 가 져 옵 니 다. 이것 은 store 인 스 턴 스 입 니 다.이 를 통 해 store 인 스 턴 스 의 속성 과 방법 을 얻 을 수 있 습 니 다.예 를 들 어 context.state 는 state 속성 을 얻 고 context.comit 는 commt 명령 을 실행 합 니 다.사실 actions 는 간단하게 쓸 수 있 습 니 다.함수 의 매개 변 수 는 하나의 대상 이기 때문에 함수 에서 사용 하 는 것 은 대상 중의 한 방법 입 니 다.우 리 는 대상 의 구조 할당 을 통 해 이 방법 을 직접 얻 을 수 있 습 니 다.actions 수정 해 주세요.
actions: {
increment({commit}){
commit("INCREMENT")
},
decrement({commit}){
commit("DECREMENT")
}
}
3.파견 action이제 dispatch action 만 남 았 습 니 다.언제 dispatch action 을 보 낼 까요?단 추 를 눌 렀 을 때 만 클릭 이벤트 가 추 가 됩 니 다.클릭 이벤트 처리 함수 에서 dispatch action.
이 럴 때 우 리 는 작업 구성 요 소 를 새로 만들어 야 합 니 다.우 리 는 잠시 test.vue 라 고 명명 합 니 다.
<template>
<div>
<div>
<button @click="add">+1</button>
<button @click="decrement">-1</button>
</div>
</div>
</template>
그리고 우 리 는 methods 에서 이 두 가지 조작 사건 을 가 져 옵 니 다.
<script>
export default {
methods: {
increment(){
this.$store.dispatch("increment");
},
decrement() {
this.$store.dispatch("decrement")
}
}
}
</script>
물론 위의 이런 표기 법 은 비교적 번 거 롭 습 니 다.vuex 는 저 에 게 mapActions 라 는 함 수 를 제 공 했 습 니 다.이것 은 mapState 와 같 습 니 다.저희 의 action 을 store 안의 action 에 직접 비 추 었 습 니 다.
<script>
import {mapActions} from 'vuex'
export default {
methods: {
...mapActions(['increment', 'decrement'])
}
}
</script>
이벤트 처리 함수 이름과 action 의 이름 이 다 르 면 mapActions 에 게대상 을 제공 합 니 다.대상 의 속성 은 이벤트 처리 함수 이름 이 고 속성 값 은 dispatch 의 action 이름 입 니 다.
<script>
import {mapActions} from 'vuex'
export default {
methods: {
// ,
// vue mapAction ,
// mapState , action store action 。
// increment () {
// this.$store.dispatch('increment')
// },
// decrement () {
// this.$store.dispatch('decrement')
// }
//
// ...mapActions(['increment', 'decrement'])
/**
action , mapActions
, , dispatch action 。
*/
//
...mapActions(['decrement']),
...mapActions({
add: 'increment'
})
}
}
</script>
이때 우 리 는 단 추 를 누 르 면 count 가 변화 하 는 것 을 볼 수 있다.마지막 으로 간단 한 도형 해석 을 한 장 첨부 하면 좀 더 직관 적 으로 보일 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vuex의 템플릿 리터럴 유형TypeScript 4.1은 템플릿 리터럴 유형을 도입했습니다. 언뜻 보기에는 별로 흥미롭게 들리지 않습니다. 다른 유형을 기반으로 하는 리터럴 유형의 조합을 만들 수 있습니다. 그러나이 기능이 매우 유용한 경우가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.