vuex mapGetters를 사용할 가치가 있는가?

vuex mapGetters를 사용할 가치가 있는가?

그래서 나는 제목이 내 질문을 소개한다고 믿는다.mapGetters를 사용하고자 하는 각 구성요소에 새로운 종속성을 도입할 경우, 이것은 패키지에 더 큰 부담을 가중시킨다.

이것은 또한 당신의 구성요소가 현재 Vue와 특별히 결합되어 있다는 것을 의미하는데, 그것은 당신이 반응과 같은 다른 프레임워크로 구성요소를 포팅해야 할 경우 1가지 더 경쟁해야 할 것이다.

다음 두 가지 계산된 속성 목록을 고려하십시오.

import { mapGetters} from 'vuex'
    computed: {
        ...mapGetters({
          active:'interface/active',
          mode:'interface/mode',
          views:'interface/views',
        }),
    }

대

computed: {
      active:() { return this.$store.getters['interface/active'],
      mode:{ return this.$store.getters['interface/mode']},
      views:{ return this.$store.getters['interface/views']},
}

확실히 후자는 조금 더 장황하지만, 지나치게 나쁜 것은 아니다.두 시나리오 모두 같은 방식으로 모든 게터 데이터를 얻었잖아이렇게 된다는 것은 몇 글자를 절약하는 작은 이익에 대해 전혀 불필요한 과장처럼 보인다.

이전 예제의 무게는 207B(201자)이다.

반면, 후자의 예제는 207B(201자)이다.

나에게 있어 그것은 유형 저축의 관점에서 볼 때, 사실상 아무것도 가질 수 없다는 것을 의미한다.그러나 나는 전자가 더 읽기 쉽고 휴대성이 있으며 궁극적으로 당신의 관련 데이터가 모두 한 곳에 있기 때문에 유지하기가 더 쉽다는 것을 인정한다.

도우미 기능에 대해 가지고 있는 의견과 관련하여 여기서 언급할 가치가 있다고 생각하는 몇 가지가 있다.mapGetters

• 코드와 긴밀하게 연결된 정보vuex만약 당신이 수입하기로 결정한다면mapGetters: 접근하는 접근방식이this.$store.getters직접적으로 당신의 코드가 에 덜 연결되도록 하지는 않는다.vuex결국, 그러한 직접적인 접속은 이미 많은 것을 가정하고 있다.store의 기능 및 구성 요소에 노출되는 방법.

  귀하가 제공한 스냅펫을 예로 들어 보십시오. 귀사의 스토어 구현 a)라는 개념을 이미 가지고 있음을 알 수 있습니다,getters, 그리고 b) 당신이 정의 할 수 있는 모듈들을 지원한다.interface자네와 같은 모듈이지

  어느 날, 당신이 어떻게 해서든 바꾸기로 결정한다고 가정해 보자.store에 대한 구현은 어느 쪽도 전혀 개념이 없다.getters또는modules어쨌든 너는 세가지 선언을 모두 리팩터링해야 할 것이다.혹은 여러분이 와 같은 좀 더 발전된 것으로 바꾸기로 결정하더라도, 그것은 여러분을 비슷한 상황에 놓이게 할 것이다: 비록 Flure가 게이터와 모듈에 대한 개념을 가지고 있지만, 그들은 같은 방식으로 노출되지 않는다.vuex3행(행)을 모두 편집해야 한다.

  리액션에 포팅하는 것은 말할 것도 없고, 계산된 속성에 있는 코드는 Vue용으로 특별히 만들어진 다른 상점 라이브러리로도 이동할 수 없을 것이다.그러니까, 정말, 너무 걱정하지 마.mapGetters.

• 둘째로, 활자를 절약하기 위해서, 어차피 이 속성들의 이름을 바꾸지 않을 거라면, 당신의 소유권이mapGetters실제로 통화 시간을 단일 라이너로 단축할 수 있음:

computed: {
  ...mapGetters('interface', ['active', 'mode', 'views']),
}

• 셋째, 일단 이러한 선언의 여러 줄을 가지기 시작하면, 모든 선언(예: 몇 개의 선언)을 추적하는 것이 더 쉽다.getters또는state각 모듈에서 노출되는 필드).그래서 이러한 도우미 기능은 실제로 잘 사용한다면 유지보수를 향상시키는 데 도움이 된다.

computed: {
  ...mapState('interface', ['list', 'packages']),
  ...mapGetters('interface', ['active', 'mode', 'views']),
  ...mapGetters('foo', ['bar', 'baz']),
}

• 첫째로, 묶음 크기에 대해서, 나는 다시 생각해보니 이것이 사람들이 너를 비하하는 주된 이유라고 생각한다.그래서, 나는 다음과 같이 설명하려고 한다.

  여러분이 이해해야 할 것은 오늘날의 실제 프로덕션 웹 앱은 다음과 같은 빌드 툴을 사용한다는 것이다.webpackJavascript 번들을 만들기 위해서.그 때문에 당신이 쓴 자바스크립트는source code, 이것은 묶음으로 선적된 코드와는 완전히 다르다.이렇게 다른 이유는 번들이 파일 크기(일반적으로 70% 이상 크기 축소)를 획기적으로 향상시키기 위해 와 기법을 모두 활용할 수 있기 때문이다.

  다시 말해, 요즘 웹앱의 경우, javascript가 있는 그대로 제공되지 않고, 거의 항상 에 의해 처리되고 있다.webpack또는 그 밖의 유사한 것그래서 지금까지 쭉 세어온 캐릭터 세기는 다.source code최종 묶음 크기에 전혀 차이가 없을 겁니다.그리고 이것 때문에, 어떤 사람들은 여러분의 걱정을 아주 나쁜 형태의 미시적 최적화로 간주할 수도 있고, 따라서 그들의 하향 평준화 입니다.

  나 같으면 이런 도우미 기능을 최대한 수용해보고, 자동 빌드 최적화 후 번들 사이즈를 살펴본 뒤 번들 사이즈를 전혀 고민해보겠다.그리고 최종 묶음 사이즈가 마음에 들 정도로 크더라도, 나는 거의 장담할 수 있다.mapGetters리팩터링(refactoring)은 보통 번들 크기를 상당히 부풀리는 다른 것들이기 때문에(예: 뷰 컴포넌트 라이브러리 등)실제로, 시기상조 최적화:vuex네가 고생할 만한 가치가 없어

그래서 내게는 이런 기능들이 (나에게)mapStatemapGettersmapActionsmapMutations가 있다은 분명히 쓸 만한 가치가 있다.

참조URL: https://stackoverflow.com/questions/52773324/are-vuex-mapgetters-even-worth-using