vue & vuex getter vs 소품 통과 상태

vue & vuex getter vs 소품 통과 상태

컴포넌트를 보다 재사용하기 위해 컴포넌트 내부의 vue 상태에 직접 액세스하지 말고 소품을 통해 컴포넌트에 상태를 전달할 것을 조언하는 많은 사람을 보았습니다.

다만, 이것을 일관되게 실시하면 루트 컴포넌트만이 스토어와 통신해, 최종 컴포넌트를 취득하기 위해서, 모든 데이터가 네스트 된 계층을 통과할 필요가 있는 것을 의미합니다.이렇게 되면 혼란이 생기기 쉬워집니다.

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

사용자 신용 카드의 데이터는 어떻게 로드합니까?Dashboard에서 트리로 넘겨줄까요?

난장판이 될 거예요, 맞아요.이것은 vuex가 해결하는 문제 중 하나입니다.

그럼 소품을 건네줄지 아니면 Vuex를 사용할지 어떻게 결정하나요?vuex 사용이란 필요한 컴포넌트에서 직접 스토어 데이터에 액세스하는 것을 의미합니다.요령은 각 데이터와 애플리케이션 전체의 관계를 고려하는 것입니다.

여러 DOM 계층, 다른 페이지 등에서 페이지 전체에서 반복적으로 사용되는 데이터는 vuex를 사용하는 이상적인 경우입니다.

한편, 일부 부품은 너무 밀접하게 결합되어 있기 때문에 지나가는 소품이 확실한 해결책입니다.예를 들면,list-container컴포넌트(직계자)는list둘 다 동일한 목록 데이터가 필요합니다.이 상황에서, 저는 리스트 데이터를list컴포넌트를 사용합니다.

---

인스턴스 속성에 관심이 있을 수 있습니다.$attrs

https://vuejs.org/v2/api/ #vm-attrs

형제 옵션과 함께inheritAttrs.

https://vuejs.org/v2/api/ #상속 속성

이 두 가지를 함께 사용하면 보일러 플레이트 코드를 줄이면서 여러 구성 요소 수준을 전달할 수 있습니다.

계층 위치에 관계없이 모든 구성요소는 저장소와 통신할 수 있습니다.

모든 컴포넌트 내에서 오브젝트에 액세스할 수 있습니다.this.$store파견할 수 있도록actions, 데이터를 커밋합니다.mutations또는 데이터를 읽습니다.getters

상세한 것에 대하여는, 다음의 메뉴얼을 참조해 주세요.

루트 인스턴스에 스토어 옵션을 제공하면 스토어가 루트의 모든 하위 구성 요소에 삽입되어 이와 같이 해당 구성 요소에서 사용할 수 있습니다.$store.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

언급URL : https://stackoverflow.com/questions/47069902/vue-vuex-getter-vs-passing-state-via-props