Vuex: 스토어에 직접 액세스하거나 속성을 전달합니까?

Vuex: 스토어에 직접 액세스하거나 속성을 전달합니까?

순수 Vue 애플리케이션을 Vuex로 마이그레이션하려고 하는데 데이터를 다운스트림 컴포넌트에 전달하는 최선의 방법이 무엇인지 잘 모르겠습니다.Vue 방법은 속성을 전달합니다.

<component :my-prop="myProp"/>

Vuex 방법은 스토어에 직접 액세스하는 것 같습니다.

computed: {
    myProp: function() {
        return this.$store.state.myProp;
    }
}

Vuex 방식은 뷰(컴포넌트)와 데이터(스토어) 레이어를 더 긴밀하게 결합하는 경향이 있지 않습니까?한편, 다운스트림에 있는 부동산을 물려주는 것은 조금 귀찮을 수 있습니다.

Vuex에서 스토어 데이터에 액세스하는 권장 방법은 무엇입니까?

"공식적인" 권고는 확실치 않지만, 저는 개인적으로 부동산 사용을 선호합니다.이렇게 하면 저장소에서 성분을 분리할 수 있습니다.예를 들어 컴포넌트는 (다른 프로젝트 등에서) 재사용할 수 있으며 스토어는 종속성이 없습니다.

나중에 새로운 버전의 VueX와 같은 스토어가 변경되면 부모만 변경하면 모든 컴포넌트가 동일하게 동작합니다.

부모에게 , 하면 됩니다.prop는 조금 귀찮을 수 있습니다.이 문제를 해결하기 위해 더 나은 설계를 할 수 있습니다. 이런 상황을 상상해 보십시오. 부모 컴포넌트는 여러 개의 하위 컴포넌트를 가지고 있으며, 그 자체로 데이터를 가져와 자녀에게 전달합니다.을 볼 수 변경되었을 때 컴포넌트 하도록 할 수 한(「」 「 」 「 」 「 」 「 、 「 」 「 API 」 ） 。부모가 인터페이스에 복종하는 한 자녀는 변경할 필요가 없습니다( ).event §props해 두었습니다.s) (직접 한 와 비교하면)

일반적으로 디자인 채택 여부는 프로젝트 수명 전체를 고려해 팀에 도움이 되는지 여부에 따라 달라집니다.따라서 이러한 대형 시스템은 많은 사람들이 수년간 유지 보수해야 하기 때문에 많은 설계를 가지고 있습니다.하지만 일상적인 워크플로우에서 파일을 이동하는 스크립트 같은 일회용 프로젝트라면 더러우면서도 작동 가능한 코드를 사용하면 어떨까요?

그리고 저희가 말씀드린 소품이나 렌더링 같은 아이 컴포넌트는pure function즉, 같은 입력을 몇 번 반복해도 같은 것을 출력합니다.우리가 좋아하는 것처럼functional programming그들은 종종 형태가 단순하고 유지보수가 쉽지만, 이 불순한 세계에 적응하기 위해 그것들을 디자인하고 쓰기 위해 약간의 여분의 노력이 필요하다.

vuex 스토어에 모든 것을 저장할 필요는 없습니다.컴포넌트 데이터는 소품을 통해 하위 컴포넌트에 전달할 수 있습니다.

다음은 redex에 대한 또 다른 질문입니다.

다른 컴포넌트와 공유할 필요가 없거나 컴포넌트가 마운트 해제되어도 상태를 유지할 필요가 없는 경우에는 컴포넌트 상태로 하면 됩니다.

vuex 스토어는 프런트엔드의 데이터베이스라고 생각할 수 있습니다.API에서 가져온 제품 데이터와 유사한 데이터가 있는 경우 vuex 스토어가 적절한 장소입니다.드롭다운 컴포넌트가 있어 isOpen 프로펠을 사용하는 경우 드롭다운의 부모는 드롭다운 IsOpen을 컴포넌트 상태로 유지할 수 있습니다.

기본적으로는 두 가지 컴포넌트, 즉 용기 컴포넌트와 프레젠테이션 컴포넌트가 있습니다.

컨테이너 컴포넌트는 vuex 스토어에 직접 액세스합니다.프레젠테이션 컴포넌트는 vuex에 대해 아무것도 알 필요가 없으며 소품만 제공되므로 쉽게 재사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/41632362/vuex-accessing-store-directly-or-passing-properties