vuex 의 mutation 과 action 의 기본 사용

우리 가 실현 하고 자 하 는 것 은 매우 간단 하 다.바로+1 의 count 플러스 1 을 클릭 하고-1 을 클릭 할 때 count-1 이다.

돌연변이
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 가 변화 하 는 것 을 볼 수 있다.
마지막 으로 간단 한 도형 해석 을 한 장 첨부 하면 좀 더 직관 적 으로 보일 것 이다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.