이해력Vuex의 매핑

vuex에는 조수 함수가 있는데, 자주 나타난다.

computed() {
    ...mapGetters(['currentUser'])
}

내가 처음 그것을 사용했을 때, 나는 ES6 문법을 사용할 수 없게 하는 babel 문제에 부딪혔기 때문에, 나는 예상대로 이 함수를 사용할 수 없었다.변통 방법을 사용하면 이 작은 부분이 무엇을 하는지 정확하게 이해할 수 있기 때문에 나는 그것을 써야 한다고 생각한다.
사실은 이곳에서 몇 가지 일이 발생했다는 것을 증명한다.하나는 mapGetters 함수로서의 작용이고, 다른 하나는 확장 문법이 어떻게 결과를 변환하는가이다.함수 자체부터 시작합시다.

무엇이 맵입니까?

우리의 예시에서 mapGetters의 목적은 store.getters.currentUser의 결과를 계산 속성currentUser에 비추는 것이다.이것은 우리가 이렇게 getter 함수에 접근할 수 있도록 합니다.

<div>{{currentUser}}</div>

사실이 증명하듯이 mapGetters 하나의 대상이나 하나의 수조를 받아들일 수 있다.이 코드는 위의 그림과 같다.

computed() {
    ...mapGetters(['currentUser'])
}

그럴 수도 있어.

computed() {
    ...mapGetters({currentUser: 'currentUser'})
}

첫 번째 상황에서 명칭 분배는 은밀하고, 두 번째 상황에서 명칭 분배는 현저하다.하지만 유일한 차이다.
이제 우리는 함수가 무엇을 하는지 알게 되었으니, 그것을 분해합시다.

I'm always in favor of having multiple different ways to understand concepts. So, I asked my coworker to read this post and his explanation of what mapGetters was doing went like this.
"The idea is to take a set of variables in your store object in a view controller, and map them to a top-level getter function you can call by name from the two way binding on the html page?"

매핑기

만약 우리가 함수나 조수 문법을 전혀 사용할 수 없다고 가정하자.같은 일을 완성하기 위해서 우리는 무엇을 해야 합니까?
우리는 getter 함수를 호출하여 결과를 되돌려주고 어떤 이름을 통해 이 결과에 접근하기를 희망합니다.그래서 우리는 이렇게 해야 한다.

computed() {
    currentUser() {
         return this.$store.getters.currentUser;
    }
}

우리는 함수를 만들고 getter 함수의 결과를 되돌려주고 있습니다.이 함수 이름으로 결과에 접근할 수 있습니다. 이 예와 같습니다.

<div>{{currentUser}}</div>

우리가 사용하는 이름은 계산 함수의 이름이지 getter 방법의 이름이 아니라는 것을 기억하십시오.예를 들면, 이름이 다르다.

computed() {
    otherName() {
         return this.$store.getters.currentUser;
    }
}

결과를 얻기 위해서는 참고otherName가 필요합니다.

<div>{{otherName}}</div>

많은 바인딩은 Vue에서 가져옵니다.너는 더 많이 읽을 수 있다here.

깊이 절단하다

만약 당신이 진정으로 깊이 연구하고 싶다면, 여기는 mapGetters의 원본 코드입니다.

/**
 * Reduce the code which written in Vue.js for getting the getters
 * @param {String} [namespace] - Module's namespace
 * @param {Object|Array} getters
 * @return {Object}
 */
export const mapGetters = normalizeNamespace((namespace, getters) => {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    // The namespace has been mutated by normalizeNamespace
    val = namespace + val
    res[key] = function mappedGetter() {
      if (
        namespace &&
        !getModuleByNamespace(this.$store, 'mapGetters', namespace)
      ) {
        return
      }
      if (
        process.env.NODE_ENV !== 'production' &&
        !(val in this.$store.getters)
      ) {
        console.error(`[vuex] unknown getter: ${val}`)
        return
      }
      return this.$store.getters[val]
    }
    // mark vuex getter for devtools
    res[key].vuex = true
  })
  return res
})

여기에는 매우 많은데 그 중 일부는 대상과 수조 입력 간의 차이를 처리하기 위한 것이지만 실질은 mappedGetter 함수이다.반환 대상을 받아들이고 주어진 키를 사용하여 getter 함수와 관련된 결과를 이 값에 부여합니다.

배수

기왕 우리가 함수 자체를 이해했으니, 우리는 주의력을 확장 문법으로 돌릴 것이다.이해...mapGetters의 관건은 이 함수가 여러 개의 getter 호출을 동시에 처리하도록 설계되었다는 것을 인식하는 데 있다.우리가 사용하기 시작한 단일 용례는 여전히 유효하지만, 이것을 봅시다.

computed() {
    currentUser() {
         return this.$store.getters.currentUser;
    }
    otherThing() {
         return this.$store.getters.otherThing;
    }
    finalThing() {
         return this.$store.getters.finalThing;
    }

}

getter 함수의 결과를 가져와서 구성 요소에서 인용할 수 있는 함수 변수에 분배합니다.이것은 우리가 위에서 한 것과 같다. 단지 여러 개의 getter 호출을 동시에 진행하기 위해서이다.
이렇게 하면 이 모든 결과를 나타낼 수 있다.

<div>{{currentUser}} {{otherThing}} {{finalThing}}</div>

지금은 지도 제작자 앞에서 설명하기 쉽다....

확장 구문

ES6 확장 구문에 익숙할 수 있습니다.만약 네가 복습하고 싶다면, 나는 여기에 문장을 한 편 썼다.

5 확장 연산자

로리・ 2019년 7월 10일・ 3분 읽기

#javascript #webdev #productivity #learning

이것은 강력한 문법으로 많은 다른 일을 할 수 있다.하지만 우리의 예에서 그것이 무엇을 하고 있는지 봅시다.
우리는 이미 mapGetters 설계가 여러 함수 호출을 대체하는 데 사용되는 것을 보았다.해석할 때, 키 값 쌍으로 구성된 대상을 되돌려줍니다.모든 키는 문자열 이름이고, 모든 값은 getter 함수에 대한 호출 결과입니다.그래서 정말 우리는 이런 것만 남았다.

computed() {
    ...{'currentUser': currentUser, 'otherThing': otherThing, 'finalThing': finalThing}
}

이것은 유효한 JavaScript가 아닙니다.이것은 단지 추상적인 개념일 뿐이다.
사실이 증명하듯이 이것은 보기에 매우 대상 문자와 같다.확장 문법은 대상 문자를 어떻게 처리합니까?그 작용은 Object.assign()이다.
만약 네가 이것이 무엇을 의미하는지 잘 모른다면, 그것은 진정으로 다음과 같은 몇 가지를 한 것이다.확장 구문은 대상 내의 키 값 쌍을 선택하고 독립된 대상으로 끌어냅니다.그래서 모든 키는 우리가 전에 본 것처럼 저장 결과의 값을 인용할 수 있다.

<div>{{currentUser}} {{otherThing}} {{finalThing}}</div>

지금 다 같이 있어요.

우리 처음부터 우리의 코드를 봅시다.

computed() {
    ...mapGetters(['currentUser', 'otherThing', 'finalThing'])
}

지금 무슨 일이 일어났는지 볼 수 있을까요?그룹의 모든 문자열은 mapGetters 로 처리됩니다.이것은 같은 이름의 getter 방법을 사용하고 그것을 호출한 다음에 결과를 값으로 분배합니다. 그 중에서 키는 원시 문자열입니다.mapGetters 이 공식에 기반한 일련의 키 값 쌍을 가진 대상을 되돌려줍니다.그리고 확장 문법은 이 키 값 쌍의 모든 것을 추출하여 독립된 대상으로 템플릿 코드에서 직접 인용할 수 있습니다.그게 다야.

결론

너무 많아!너는 아마 영원히 맵을 사용하지 않을 것이다.근데 이해가 좀 멋있어요. 그렇죠?