Vuex 의 이해 Getters 의 용법 실례

1.getters 란 무엇 인가
소개state에서 우 리 는Store창고 에서state데 이 터 를 저장 하 는 데 사용 된다 는 것 을 알 게 되 었 다.만약 에 데 이 터 를 처리 하고 출력 한다 면 예 를 들 어 데 이 터 를 걸 러 내 려 면 보통 우 리 는computed에 쓸 수 있다.그러나 만약 많은 구성 요소 가 이 필터 후의 데 이 터 를 사용한다 면,예 를 들 어 떡 모양 의 그림 구성 요소 와 곡선 도 구성 요 소 를 사용 하면,우 리 는 이 데 이 터 를 추출 하여 공유 할 수 있 습 니까?이것 이 바로getters존재의 의미 다.우 리 는[getters]가 store 의 계산 속성 이 라 고 생각 할 수 있다.
2.어떻게 사용 하나
정의:우 리 는store에서 정의 할 수 있 습 니 다getters.첫 번 째 매개 변 수 는 state 입 니 다.

const getters = {style:state => state.style}

전 참:정 의 된Getters은store.getters대상 으로 노출 되 고 다른getters도 두 번 째 매개 변수 로 받 아들 일 수 있 습 니 다.
사용:

computed: {
doneTodosCount () {
  return this.$store.getters.doneTodosCount}

3.mapGettersmapGetters보조 함 수 는store중의getters를 국부 계산 속성 에 비 추 는 것 일 뿐 용법 은mapState과 유사 하 다.

import { mapGetters } from 'vuex'
computed: {
  //            getters    computed    
  ...mapGetters([
  'doneTodosCount',
  'anotherGetter',])}
 // getter     
 mapGetters({
 //    this.doneCount   store.getters.doneTodosCount
 doneCount: 'doneTodosCount'
})

4.소스 코드 분석wrapGetters초기 화getters,3 개의 인 자 를 받 아들 입 니 다.store는 현재Store인 스 턴 스 를 표시 합 니 다.moduleGetters현재 모듈 에 있 는 모든getters,modulePath대응 모듈 의 경 로 를 표시 합 니 다.

  function `wrapGetters` (store, moduleGetters, modulePath) {
   Object.keys(moduleGetters).forEach(getterKey => {
      //       getters
    const rawGetter = moduleGetters[getterKey]
    if (store._wrappedGetters[getterKey]) {
     console.error(`[vuex] duplicate getter key: ${getterKey}`)
      // getter key     ，     
     return
    }
    store._wrappedGetters[getterKey] = function `wrappedGetter` (store{
      //     getter       ，     store._wrappedGetters   ，
      return rawGetter(
       //  getter     ，      ，(local state,store getters,rootState)
      getNestedState(store.state, modulePath), // local state
       //  path  state    state 
      store.getters, 
        // store    getters
      store.state 
         // root state)}}) 
   }
   
   //  path  state    state 
  function `getNestedState` (state, path) {
     return path.length
      ? path.reduce((state, key) => state[key], state): state}  

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.