왜 우리는 국가 관리를 위해 돌연변이, 세터, 게이터가 필요한가?

왜 우리는 국가 관리를 위해 돌연변이, 세터, 게이터가 필요한가?

나는 지금 막 Vue.js에서 국가 경영에 대해 배우고 있는데 왜 그것이 이 모든 다른 방법들(교화, 게이터, 세터)과 함께 그렇게 복잡하고 혼란스러울 필요가 있는지 잘 이해할 수 없다.데이터를 직접 변경하는 것이 더 간단하지 않은가?더 깨끗해 보이지 않니?

이렇게 간단한 코드만 쓰면 뭐가 문제야?내가 뭘 놓쳤지?store: window.store를 모든 구성 요소에 정의해야 한다는 점만 제외하고.내가 이렇게 하는 것이 안전한가 아니면 내가 Vuex를 사용하는 것이 매우 필요한가?

// global app data
window.store = {
    appName: 'Hello World!'
}

export default {
    template: `
        <div @click="changeAppName">Hellow {{ store.AppName }}</div>
    `,

    data()
    {
        return {
            store: window.store
        }
    }

    methods: {
        changeAppName() {
            store.appName = 'Reactive app name!'
        }
    }
};

Vuex 문서의 첫 번째 인용:

언제 사용해야 할까?

Vuex는 우리가 공유된 국가 관리를 다루는데 도움을 주지만, 그것은 또한 더 많은 개념들과 보일러플레이트 비용도 함께 나온다.그것은 단기 생산성과 장기 생산성의 절충이다.

대규모 SPA를 만들어 본 적이 없고 바로 Vuex로 뛰어들어본 적이 없다면 장황하고 위압적인 느낌이 들 수도 있다.그것은 지극히 정상적인 것이다 - 만약 당신의 앱이 단순하다면, 당신은 Vuex 없이 괜찮을 것이다.간단한 매장 패턴만 있으면 될 겁니다.그러나 만약 당신이 중대 규모의 SPA를 건설하고 있다면, 당신은 당신의 Vue 컴포넌트 밖의 상태를 어떻게 더 잘 다룰 것인가를 생각하게 하는 상황에 부딪혔을 가능성이 있으며, Vuex는 당신에게 자연스러운 다음 단계가 될 것이다.Redex의 저자인 Dan Abramov의 좋은 인용구가 있다.

"플룩스 도서관은 안경과 같다. 필요할 때 알게 될 것이다."

만약 당신의 구성요소가 서로 다른 많은 상태를 가지고 있고 많은 다른 상태 돌연변이를 하기 때문에 매우 커졌을 때, 그리고 만약 그들의 코드들에 대해 추론하고 그것들을 유지하거나 연장하는 것은 점점 더 어려워진다.이것은 상태 저장과 구성 요소로부터의 수정을 디커플링하는 것 자체가 흥미로워지는 것이다.

여러 구성 요소가 동일한 작업 또는 돌연변이를 트리거할 수 있는 경우에도 고려하십시오.이 경우 논리가 중복되지 않도록 후자를 공통 객체/클래스/파일로 추출해야 하는 것이 명백해진다.일단 그 지점에 도달하면, 당신은 이미 Vuex와 같은 구조에 매우 가까워지고 있다.

또한 백엔드 API와 통신하는 애플리케이션은 비동기 아약스 호출, 오류 처리 등을 포함한다.만약 이 모든 것이 구성요소와 같은 파일에 저장된다면, 그것은 매우 길고 다시 읽고 이해하기 어려울 것이다.

별도의 Vuex 모듈에 모든 돌연변이를 추출하면 이를 사용하는 실제 Vue 구성 요소를 인스턴스화할 필요 없이 분리하여 테스트하기 쉽다.그러면 Vue 구성 요소는 순전히 표시 논리 및 이벤트에 대한 반응에 관한 것일 수 있다.

보다시피, 그것은 당신의 어플리케이션을 더 나은 구조로 만드는 것이다.이러한 모든 이유들은 유지보수를 훨씬 더 쉽게 하기 위해 더 큰 적용으로 추가된다.

마지막으로 Vuex는 Vue.js devtools 플러그인을 통해 상태 추적 및 롤백과 같은 멋진 기능을 추가한다.이를 통해 애플리케이션 실행의 어느 지점에서라도 상태를 검사할 수 있으며, 변경사항을 모두 이해하는데 도움이 된다.스크린샷은 아래를 참조하십시오.

그러나 간단히 말해서, 당신의 질문에 대답하자면: 아니오, Vuex는 비판적으로 필요하지 않으며 경우에 따라 더 정당하지 않은 장황함을 가져올 수 있기 때문에 그것이 말이 될 때 사용해야 한다.

갱신하다

내가 이 글을 쓴 이후, 나는 실제로 VueX에 저장하는 주의 양을 줄였다.나는 여전히 그것을 사용하지만, 모든 주들을 위해서가 아니다.나는 "페이지" 상위 요소에서 직접 주어진 "페이지" (또는 경로)보다 더 오래 살도록 의도되지 않은 상태를 유지하고 속성을 통해 전달한다.해당 상태는 소유하는 구성 요소와 함께 자동으로 삭제되기 때문에 저장소의 오래된 항목을 처리할 수 없게 되고 앱에서 긴 세션의 총 메모리 사용량을 줄인다.

몇 가지 재미있는 읽을거리:

• 이 데이터를 Vuex에 저장해야 하는가 – Vuex를 사용해야 하는 경우
• vuex에서 대량의 상태를 처리하는 방법

일단 여러분이 서로 다른 부품, 가게의 상태 등과 통신할 수 있는 더 큰 애플리케이션을 갖게 되면, 여러분은 그 게이터와 세터를 만들기 위해 노력했다는 사실에 매우 기뻐할 것이다.

만약 당신이 작고 단순한 PWA 프로젝트를 만들거나 당신이 단지 장난을 치고 있다면, 예스보다 더 혼란스러워 보일 수 있고 필요하지 않다.그러나 일단 그 작은 프로젝트가 Vuex의 주(州)에 의존하는 구성 요소에 더 의존하게 되면 (Vuex를 사용하는 것을 고려해 볼 때, 필요하지는 않지만, 필요할 때 알게 될 것이다.)

일단 당신이 Getter와 Setter를 만들고 나면, 당신은 이 패턴이 전체 어플리케이션에 있게 될 것이고, 당신의 프로젝트를 유지하는데 도움을 줄 모든 프로그래머들을 위해 코드를 깨끗하고 쉽게 읽을 수 있을 것이다.

부에와 재미있게 놀아라.

만약 당신이 객체 지향 프로그래밍에 경험이 있다면, 이 패턴은 당신에게 친숙해야 한다.중앙에서 데이터에 의존할 수 있도록.

• Getter: 예: 데이터가 초기화되었는지 확인
• 변경 사항: 예를 들어 데이터가 저장소에 기록되기 전에 데이터
• 작업: 비동기식 돌연변이 생성

그리고 물론 당신이 말한 대로 할 수 있지만, 그것은 깨끗한 스타일이 아니며 규모를 조정할 수 없을지도 모른다.

그리고 여기 vuex pathify라는 플러그인이 있는데 vuex가 어떻게 작동하는지 모르면 이해하기 어렵다.

참조URL: https://stackoverflow.com/questions/54922176/why-do-we-need-mutations-setters-and-getter-for-state-management