Vuex를 사용해야 하는 이유 및 시기

개발자로서 우리는 때때로 기술을 사용하는 함정에 빠질 수 있다. 단지 이런 기술이 함께 인기가 있거나 자주 사용되기 때문이다.이것이 바로 우리가 사용하는 모든 기술을 진정으로 이해하는 데 도움이 되는 이유이다.
이 블로그에서 나는 질문에 대답할 때 Vuex에 대해 설명을 시도할 것이다
다음 질문:

Vuex는 어떤 문제를 해결했습니까?

그것은 어떻게 이 문제를 해결했습니까?

서두

간단한 Vue부터 시작하겠습니다.상태, HTML 템플릿 렌더링, 상태 수정 방법 등의 구성 요소만 있습니다.

당신의 조립품은 완벽한 포장을 갖추고 있으며 사용 수명이 양호합니다.
현재 두 번째 구성 요소를 추가하고 도구를 통해 첫 번째 구성 요소의 상태를 전달합니다.

간단해.
지금 아래의 장면을 상상해 보세요. 그림 밑에 있는 구성 요소는 첫 번째 구성 요소의 일부 상태에서 나와야 합니다.

이 그림에서 우리가 필요로 하는 상태를 많은 층 부품에 전달하는 것을 볼 수 있다. 이런 방법을 지지 드릴링이라고 부른다.이 간단한 그림을 보면 문제가 되지 않을 것 같지만, 이 그림이 대형 응용 프로그램에서 어떤 모습일지 상상해 보세요.
일은 곧 엉망진창이 될 것이다.
그러나 이런 방법을 사용할 때 복잡성이 증가하는 구체적인 원인은 무엇입니까?

중간에 있는 구성 요소가 첫 번째 구성 요소에서 오는 상태가 아니더라도 다음 구성 요소에 전달해야 한다.(결합 증가)

아이템 이름 바꾸기에 필요한 변경 횟수가 높습니다.(코드 중복)

코드에서 수정 상태의 위치를 찾는 것은 그리 간단하지 않다.이것은 인지적 부담을 증가시킬 것이다.(복잡성 증가)

응용 프로그램이 늘어날 거예요.

응용 프로그램이 증가함에 따라 최종적으로 이러한 상황이 나타날 것이다. 구성 요소 차원 구조에 분산된 여러 구성 요소는 점점 더 많은 상태를 필요로 한다.
부모 구성 요소의 하위 구성 요소를 통해 부모 구성 요소의 일부 상태를 제어해야 한다는 것을 자주 발견합니다. 이것은 현재 하위 구성 요소에서 이벤트를 터치하고 부모 구성 요소에서 정탐해야 한다는 것을 의미합니다.
이것은 당연히 결합을 더욱 증가시킬 것이다.
다음 그림에서 코드를 간소화할 수 있는 전역 상태에 이르는 작은 프로그램을 볼 수 있습니다.

구성 요소 빨간색 구성 요소 (왼쪽 아래) 가 노란색 구성 요소 (오른쪽 아래) 에서 접근해야 한다면 악몽이 될 것이라고 상상해 보세요.
이 문제를 해결하기 위해서 우리는 세 가지 다른 선택이 있다.

상태를 구성 요소 차원 구조의 맨 위로 이동하면 우리는 그것을 필요로 하는 구성 요소에 다시 전달할 수 있다.

이벤트를 통해 구성 요소의 차원 구조를 위로 보내고 도구를 통해 아래로 전달한다.

전역 상태를 사용합니다.

현재 당신은 앞의 두 옵션이 특히 더 큰 응용 프로그램에서 매우 복잡해질 수 있다는 것을 알아야 합니다.세 번째 선택을 봅시다.

전 세계 국가

이것은 전역 상태의 작용입니다. 프로그램의 어느 곳에서든 상태를 접근하고 수정할 수 있습니다.
Vue에서는 간단할 수 있습니다.

methods: {
    toggleTheme: () => {
      this.$root.darkMode = true;
    }
}

현재, 인용 this.$root.darkMode 을 통해 다른 구성 요소에서 사용할 수 있습니다.
예시 코드에서 보듯이 프로그램의 테마를 설정하고 있습니다.
이런 상황에서, 이것은 프로그램 전체에서 진정으로 사용할 수 있어야 하며, 그것을 구성 요소에 연결하는 것은 무의미하다.
다음 질문: 만약 이런 방법이 이렇게 간단하다면 왜 우리는 Vuex가 우리의 전 세계 상태를 관리해야 합니까?
전 세계 국가의 문제는 고유의 문제가 있다는 데 있다.

전역 상태는 어느 곳에서든 수정할 수 있다. 이것은 운행할 때 예측치가 무엇인지, 어디서 값을 바꾸는지 예측하기가 더욱 어려워진다는 것을 의미한다.(복잡성 증가)

만약 두 구성 요소가 같은 전역 변수에 의존한다면 이것은 구성 요소가 현재 결합되었다는 것을 의미한다.이것은 우리가 전에 만났던 것처럼 전 세계 국가의 문제가 아니다.그러나 이전에 구성 요소 간에 아무런 결합이 없었다면 이것은 새로운 문제가 될 것이다.

테스트를 더욱 어렵게 한다.지금부터 너는 반드시 전 세계 국가를 비웃어야 한다.(복잡성 증가)

통량

이것이 바로 통량의 원천이다.Flux는 애플리케이션의 데이터 흐름을 관리하는 모델입니다.
Flux에 대해 간략하게 설명해 드리겠습니다.
그럼 통량은 뭐예요?
위 그림의 예로 돌아가면 왼쪽 아래 어셈블리(빨간색)는 오른쪽 아래 어셈블리(노란색)의 상태가 필요합니다.
다음은 Vuex(Vue의 공식 트래픽 구현)에서 수행되는 작업입니다.

구성 요소 분배 작업(예를 들어 사용자 클릭 버튼)

저장소는 받은 조작에 따라 업데이트된다(예를 들어'증량'은 저장소의count 속성을 증가시킨다)

구성요소 스토어 업데이트 시 업데이트

Flux(따라서 Vuex)는 데이터를 구성 요소와 결합하지 않고 완전히 분리합니다.
Flux의 다른 구현은 일반적으로 서로 다른 용어를 사용하고 원시 모델의 일부분을 추가하거나 삭제하기 때문에 때때로 곤혹스러울 수 있다.그러나 근본적으로 모든 실현은 같은 원칙을 따른다.통량에 대한 정보를 더 알고 싶다면, 좋은 개요 here 를 얻을 수 있다.

Vuex

Vuex는 Vue의 공식 트래픽 구현입니다. 위의 예와 같이
그것은 위의'글로벌 상태'부분의 글로벌 상태 예시와 같은'지주 시추'문제를 해결했다.
글로벌 상태 예와 Vuex 간의 주요 차이점 중 하나는 Vuex가 실제적으로 응용 프로그램 상태most를 저장소에 저장하도록 권장한다는 것이다.이렇게 해서 Vuex는 유일한 진실의 원천이 되었다.
또한 더 좋은 개발자 체험을 제공함으로써 글로벌 state 고유의 문제를 완화시키려고 한다.
그렇다면 Vuex는 일반적인 글로벌 상태를 사용하는 것보다 어떤 장점이 있습니까?

수정 상태의 표준화 모델

Vue와 더욱 잘 통합

좋음Debugging Tools, UTIL 테스트 시 통합easier testing

Vue 커뮤니티

에서 자주 사용되므로 더 나은 지원 제공
전체적으로 Vuex는 중대형 애플리케이션에 상당한 가치를 제공합니다.작은 프로그램이 있을 때
사용하지 않으려고 생각할 수도 있어요.
Original Blog Post