이전 글은 상태 읽기에 관한 글이었고, 이번 글은 상태 수정에 관한 글입니다. 즉, Mutations를 조작하는 방법입니다.
1.$store.commit( )
Vuex는 status
1.store.js 파일
const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } }
2 수정 방법을 버튼
2 .값 전달
상태를 수정하는 가장 간단한 작업입니다. 실제 프로젝트에서는 상태를 수정할 때 값을 전달해야 하는 경우가 많습니다. 예를 들어 위의 예에서는 매번 1만 추가했지만 이제 전달된 값을 추가해야 합니다. 실제로 Mutations에 다른 매개변수를 추가하고 커밋할 때 전달하기만 하면 됩니다. 특정 코드를 살펴보겠습니다.
1.store.js
const mutations={ add(state,n){ state.count+=n }, reduce(state){ state.count-- } }
2. 버튼의 commit() 메소드에 의해 전달된 매개변수를 수정합니다. 이는
<버튼을 의미합니다. @click=" $store.commit('add',10)">+
3. 템플릿 획득 Mutations 메소드
실제 개발에서는 $store.commit()과 같은 메소드가 템플릿에서 호출되는 메소드와 동일하게 호출되기를 바랍니다.
예: @click="reduce"는 vuex 플러그인을 인용하지 않는 것과 같습니다.
1. import를 사용하여 count.vue 템플릿에 mapMutations를 도입합니다.
import { mapState,mapMutations } from 'vuex'
2. 템플릿의