programing

커밋을 사용한 액션에서 VueX 업데이트 상태

shortcode 2022. 7. 26. 23:55
반응형

커밋을 사용한 액션에서 VueX 업데이트 상태

Vuex는 처음입니다.액션에서 주에 액세스 할 수 없는 이유, 수정 후 커밋할 수 없는 이유를 누가 알려 주시겠습니까?상태 어레이를 변경하기 전에 "깊이" 복사본을 만듭니다.이를 위한 대체 베스트 프랙티스 방법은 무엇입니까?

제 행동은 다음과 같습니다.

[Action.UPDATE_CHERRYPICK_SIZE] ({ state, commit }, { recipe, size }) {
    var shoppinglist = [...state.shoppinglist]
    var cp = shoppinglist.find(v => v.recipe.id === recipe.id)
    cp.size = size
    commit(Mutation.SET_SHOPPINGLIST, shoppinglist)
}

돌연변이 상태만 변화시켜라. (그래서 돌연변이라고 한다.)목록을 복제할 필요가 없습니다.설정을 위한 변환 생성cp크기:

SET_CP_SIZE(state, { cp, size }) {
  cp.size = size;
}

그리고 당신의 행동:

[Action.UPDATE_CHERRYPICK_SIZE] ({ state, commit }, { recipe, size }) {
  var cp = state.shoppinglist.find(v => v.recipe.id === recipe.id)
  commit(Mutation.SET_CP_SIZE, { cp, size })
}

이 방법으로는 사용할 수 없습니다.state하지만 괜찮습니다대신,cp상태 배열의 항목입니다.

가장 좋은 방법은 상태를 갱신하기 위해 변환을 작성하는 것입니다.SET_SHOPPING LIST 변환에서는 스테이트에 액세스하여 값을 설정할 수 있습니다.

Vuex 스토어에서 실제로 상태를 변경하는 유일한 방법은 변환을 커밋하는 것입니다.Vuex 돌연변이는 이벤트와 매우 유사하며 각 돌연변이는 문자열 유형과 핸들러를 가집니다.핸들러 함수는 실제 상태 변경을 실행하는 함수로, 상태를 첫 번째 인수로 수신합니다.

코드 예를 보려면 링크를 참조하십시오.

언급URL : https://stackoverflow.com/questions/60224360/vuex-update-state-from-action-with-commit

반응형