> 웹 프론트엔드 > JS 튜토리얼 > Vuex의 Mutations 수정 상태 작업에 대한 자세한 설명

Vuex의 Mutations 수정 상태 작업에 대한 자세한 설명

coldplay.xixi
풀어 주다: 2020-07-29 17:25:52
앞으로
2322명이 탐색했습니다.

Vuex의 Mutations 수정 상태 작업에 대한 자세한 설명

이전 글은 상태 읽기에 관한 글이었고, 이번 글은 상태 수정에 관한 글입니다. 즉, 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. 템플릿의

인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿