Vuex 작업 내에서 상태를 직접 조작하는 경우와 'commit' 및 'getters'를 사용하는 경우의 비교

Vuex 작업 내에서 상태를 직접 조작하는 경우와 'commit' 및 'getters'를 사용하는 경우의 비교

일반적으로 Vuex 상태를 스토어 외부에서 직접 조작(컴포넌트 등)하는 것은 좋지 않은 방법이지만, 액션 내에서 상태를 읽거나 변경하는 베스트 프랙티스를 이해하는데 어려움을 겪고 있습니다.

나는 행동에는 본질적으로 다음 요소가 있다는 것을 이해한다.contextobject as an argument, 여기서 얻을 수 있습니다.state,게다가getters,commit,그리고.dispatch속성으로 사용합니다.그런데 이걸 어떻게 사용하는 게 좋을지 모르겠어요.예를 들어 다음과 같습니다.

      testAction: ({commit, getters, state}) => {

        if(state.foo === 'bar'){ // is this bad practice? 
            // ...do a thing
        }
        if(getters.getFoo === 'bar'){ // should I always read the state with a getter like this instead?
            // ...do a thing
        }

        commit('setFoo', 'foobar'); // do I always need to set the state via commit like this

        state.foo = 'foobar' // or is it fine to just do this?

      }

댓글 좀 봐주세요.행동 내에서 상태를 조작하는 '올바른' 방법은 무엇입니까?항상 사용할 필요가 있습니까?commit그리고.getters만약 그렇다면, 왜?context오브젝트는 심지어 상태를 노출합니다. 당신은 언제 이것을 액션에 사용할 수 있습니까?고마워요.

문서 돌연변이와 동작은 다음과 같이 정의됩니다.

Actions Actions는 돌연변이와 유사하며 차이점은 다음과 같습니다.상태를 변환하는 대신, 동작은 돌연변이를 커밋합니다.액션은 임의의 비동기 작업을 포함할 수 있습니다.

돌연변이 Vuex 스토어에서 실제로 상태를 변경하는 유일한 방법은 돌연변이를 커밋하는 것입니다.Vuex 돌연변이는 이벤트와 매우 유사하며 각 돌연변이는 문자열 유형과 핸들러를 가집니다.핸들러 함수는 실제 상태 변경을 실행하는 장소이며 첫 번째 인수로 상태를 수신합니다. (...) 기억해야 할 중요한 규칙 중 하나는 변환 핸들러 함수가 동기화되어야 한다는 것입니다.

상태 수정은 돌연변이를 사용하여 수행해야 합니다. 그렇지 않으면 Vue 앱을 통해 업데이트가 올바르게 전송되고 컴포넌트가 그에 따라 업데이트되지 않습니다.하지만 돌연변이를 저지르기 위한 행동을 강요하지는 않습니다.동작은 상태 및 비동기 메서드의 복잡한 변경을 처리할 수 있는 돌연변이의 구성이라고 생각할 수 있습니다.따라서 조작이 간단하면 변환을 사용하고, 그렇지 않으면 액션을 사용합니다.다만, 돌연변이는 동기하고 있기 때문에, 요구가 끝난 액션이 무거운 액션이 될 때까지 프런트 엔드를 동결하는 경우가 있습니다(여기서 Akryum, vuejs의 핵심 멤버에 대한 좋은 설명).

마찬가지로 getters는 저장소에서 검색된 데이터를 "포맷"하는 방법입니다.

경우에 따라서는, 아이템의 리스트를 필터링 해 카운트 하는 등, 스토어 상태에 근거해 파생 상태를 계산할 필요가 있습니다.

즉, getter를 생성할 필요가 없는 상태에서 간단한 키만 필요한 경우 해당 상태에서 필요한 정보를 얻을 수 있습니다.

예를 들면 다음과 같습니다.

testAction: ({commit, getters, state}, testData) => {

    if(state.foo === 'bar'){ // is this bad practice? ==> Good to go !
        // ...do a thing
    }

    if(getters.getFoo === 'bar'){ // should I always read the state with a getter like this instead?  ==> Good to go ! but it depends on the way you can retrieve data from the state (like if you need to know the number of items within a list)
        // ...do a thing
    }

    commit('setFoo', 'testData'); // do I always need to set the state via commit like this  ==> **YES** !

    state.foo = 'foobar' // or is it fine to just do this? ==> never do this

}

또한 컴포넌트에 VueX를 쉽게 통합할 수 있도록 api는 스토어 속성에 액세스하여 이들을 계산된 속성 또는 메서드로 사용하는 함수 세트를 제공합니다. , , , .

언급URL : https://stackoverflow.com/questions/59425669/direct-manipulation-of-state-within-a-vuex-action-vs-using-commit-and-getter