확산 구문(...)은 mapGetters에서 정확히 어떻게 작동합니까?

확산 구문(...)은 mapGetters에서 정확히 어떻게 작동합니까?

Vuex의 mapGetter 도우미와 함께 계산된 getter를 사용할 때는 항상 다음과 같이 사용합니다.

...mapGetters([
    'getter1', 
    'getter2', 
    'etc'
])

함수 인수로 사용되는 어레이를 확장하기 위해 사용되는 확산 연산자를 이전에 본 적이 있지만 여기서 볼 수 있는 것과 같은 메서드 앞에서는 사용할 수 없습니다.mapGetters예.

Mozilla 문서를 참조할 때도 이 구문의 예를 찾을 수 없습니다.예를 들어 다음과 같습니다.

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

아무것도 없어요.이 구문은 정확히 어떻게 작동하며, 이 케이스는 어떻게 작동하며, 누군가는 이에 대한 문서를 제공할 수 있을까요?

mapGetters 및 mapActions는 기본적으로 vuex에서 제공하는 도우미입니다.vuex는 키를 메서드 이름으로 하고 값을 정의된 메서드로 반환합니다.이 오브젝트는...와 결합됩니다.(오브젝트 확산 연산자)는 계산 오브젝트 또는 메서드 오브젝트 내의 개별 함수에 각각 전개한다.

예를 들어 다음과 같습니다.

{
    computed: {
        ...mapGetters([
            'getter1',
            'getter2',
            'getter3'
        ]);
    }
}

{
    computed: {
        getter1() {
            return this.$store.getters.getter1;
        },
        getter2() {
            return this.$store.getters.getter2;
        },
        getter3() {
            return this.$store.getters.getter3;
        },
    }
}

위의 두 가지 모두 동일하므로 기본적으로 정의 개체 {getter1, getter2, getter3}을(를) 다소 반환하고 동일한 이름의 개별 계산된 속성으로 구분합니다.

다음 URL도 참조할 수 있습니다.-

https://www.youtube.com/watch?v=SaBnaGu7cP8&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index=8

https://vuex.vuejs.org/en/getters.html

저는 Val의 답변을 누락되었다고 생각되는 세부사항으로 명확히 하려고 합니다.예제에서는 "방법 앞에서" 스프레드 연산자를 사용하지 않습니다.실제로 일어나고 있는 것은, 그것이 의 결과에 적용되고 있는 것입니다.mapGetters

다음과 같이 생각할 수 있습니다.

{
    ...{
        getter1: /* a mapped fn from vuex store */,
        getter2: /* a mapped fn from vuex store */,
    }
}

스프레드 연산자가 객체 리터럴과 함께 작동하는 방법에 대한 자세한 내용은 Val Cajes Luminarias에서 제공된 문서를 참조하십시오.https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

개체 속성을 다른 개체와 병합하는 데 사용됩니다.거기 문서에 나와 있어요https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

아래쪽에Spread in object literals부분.

실제로 직접 사용하실 수 있습니다.mapGetters를 들면:computed: mapGetters([/*...*/] 구문 ...★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

computed: {
//nothing here - no any local computed properties
      ...mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),
    },

computed: mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),

위 둘 다 정확히 같은 일을 해!

그러나 로컬 계산 속성이 있는 경우 구문 확산이 필요합니다.mapGetters가 개체를 반환하기 때문입니다.그리고 여러 개체를 하나로 병합할 개체 확산 연산자가 필요합니다.

computed: {
  localComputed () { /* ... */ },
  // we use ... Spread Operator here to merge the local object with outer objects
  ...mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),
}

일이 mapActions,mapState.

MDN에서 개체 리터럴 확산에 대한 자세한 내용을 볼 수 있습니다.

기본적으로, 이 상황에서는 오브젝트를 병합하는 데 사용되었습니다.

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

//without ..., it will become wrong
let wrongCopy = {obj}
// wrongCopy is { {a: 1, b: 2, c: 3} } - not what you want

실제로 Vuex Docs에서는 이 점에 대해 명확하게 설명하지만,mapGetters 첫 일은 다음과 같습니다.mapState이 경우, 이 노래예요.

언급URL : https://stackoverflow.com/questions/48091687/how-exactly-does-the-spread-syntax-work-with-mapgetters