Vue 어플리케이션에서 Vuex를 사용하여 대용량 데이터셋을 효율적으로 처리

Vue 어플리케이션에서 Vuex를 사용하여 대용량 데이터셋을 효율적으로 처리

Vue 어플리케이션에서는 Vuex 스토어 모듈에 대규모 리소스 객체 어레이가 있습니다.이러한 어레이의 개별 리소스에 쉽게 액세스하기 위해 리소스 또는 리소스 목록을 다양한 키(예: 'ID' 또는 '태그')에 매핑하는 Vuex getter 함수를 만듭니다.이로 인해 퍼포먼스가 저하되고 메모리 용량이 커집니다.중복된 데이터를 많이 사용하지 않고 동일한 기능과 반응성을 얻을 수 있는 방법은 무엇입니까?

스토어 모듈 예시

export default {
  state: () => ({
    all: [
      { id: 1, tags: ['tag1', 'tag2'] },
      ...
    ],
    ...
  }),

  ...

  getters: {
    byId: (state) => {
      return state.all.reduce((map, item) => {
        map[item.id] = item
        return map
      }, {})
    },

    byTag: (state) => {
      return state.all.reduce((map, item, index) => {
        for (let i = 0; i < item.tags.length; i++) {
          map[item.tags[i]] = map[item.tags[i]] || []
          map[item.tags[i]].push(item)
        }
        return map
      }, {})
    },
  }
}

컴포넌트 예시

export default {
  ...,

  data () {
    return {
      itemId: 1
    }
  },

  computed: {
    item () {
      return this.$store.getters['path/to/byId'][this.itemId]
    },

    relatedItems () {
      return this.item && this.item.tags.length
        ? this.$store.getters['path/to/byTag'][this.item.tags[0]]
        : []
    }
  }
}

이 문제를 해결하려면 오래된 표준 프로그래밍 방법인 인덱스를 참조하십시오.한 값이 하는 대신 을 getter에 할 수 .state.all그런 다음 단일 항목에 액세스하는 함수를 반환하는 새 getter를 만들 수 있습니다.제 경험상 인덱스 게터 함수는 이전 getter 함수보다 항상 빠르게 실행되며 출력은 메모리 공간을 훨씬 적게 차지합니다(내 앱에서는 평균 80% 적게 사용).

새 스토어 모듈 예시

export default {
  state: () => ({
    all: [
      { id: 1, tags: ['tag1', 'tag2'] },
      ...
    ],
    ...
  }),

  ...

  getters: {
    indexById: (state) => {
      return state.all.reduce((map, item, index) => {
        // Store the `index` instead of the `item`
        map[item.id] = index
        return map
      }, {})
    },

    byId: (state, getters) => (id) => {
      return state.all[getters.indexById[id]]
    },

    indexByTags: (state) => {
      return state.all.reduce((map, item, index) => {
        for (let i = 0; i < item.tags.length; i++) {
          map[item.tags[i]] = map[item.tags[i]] || []
          // Again, store the `index` not the `item`
          map[item.tags[i]].push(index)
        }
        return map
      }, {})
    },

    byTag: (state, getters) => (tag) => {
      return (getters.indexByTags[tag] || []).map(index => state.all[index])
    }
  }
}

새로운 컴포넌트 예시

export default {
  ...,

  data () {
    return {
      itemId: 1
    }
  },

  computed: {
    item () {
      return this.$store.getters['path/to/byId'](this.itemId)
    },

    relatedItems () {
      return this.item && this.item.tags.length
        ? this.$store.getters['path/to/byTag'](this.item.tags[0])
        : []
    }
  }
}

변화는 작은 것처럼 보이지만 성능과 메모리 효율 면에서 큰 차이를 보입니다.이전과 마찬가지로 완전히 반응하지만 더 이상 메모리 내의 모든 리소스 개체를 복제하지 않습니다.구현에서는 다양한 인덱스 방법론과 인덱스 확장 방법론을 추상화하여 코드를 매우 쉽게 유지 보수할 수 있도록 했습니다.

github에서 완전한 개념 실증을 확인하실 수 있습니다.https://github.com/aidangarza/vuex-indexed-getters

(@aidangarza에 따라) 선택한 필드만 저장하는 것이 좋은 중간 옵션이지만, 실제로 대량의 데이터를 저장하게 되면 여전히 실행할 수 없습니다.예를 들어, "단 2개의 필드"에 대한 200만 개의 레코드로 활발하게 작업하는 것은 여전히 사용자의 기억을 손상시키고 브라우저 성능을 저하시킬 수 있습니다.

일반적으로 Vue에서 대규모(또는 예측할 수 없는) 데이터 세트를 사용할 경우(VueX 사용) get 및 commit 메커니즘을 모두 건너뛰기만 하면 됩니다.VueX를 사용하여 CRUD 작업을 중앙 집중화(액션을 통해)하지만 결과를 "캐시"하려고 하지 말고, 사용 중인 동안 각 구성 요소가 필요한 것을 캐싱하도록 하십시오(예: 결과의 현재 작업 페이지, 일부 예측).

제 경험상 VueX 캐싱은 현재 사용 상황(즉, 현재 로그인한 사용자)에서 합리적으로 제한된 데이터 또는 제한된 데이터 서브셋을 대상으로 합니다.데이터의 규모를 전혀 모르는 경우에는 액션을 통해서만 Vue 컴포넌트에 의한 "필요에 따라" 액세스를 유지합니다.이러한 대규모 데이터 세트에 대한 getter나 돌연변이는 발생하지 않습니다.

저는 @aidangarza에 동의하지만, 당신의 가장 큰 문제는 반응성이라고 생각합니다.구체적으로는computed소유물.이것은 불필요한 모든 것을 들어주는 과장된 논리와 느린 코드를 더한다.

관련 항목을 찾으면 목록 전체를 확인할 수 있습니다. 쉽게 회피할 수 있는 방법은 없습니다.하지만 당신이 직접 전화하면 훨씬 빠를 거예요.

제 말은, 계산된 속성은 계산될 무언가에 관한 것이라는 것입니다.실제로 결과를 필터링하고 있습니다.변수에 감시자를 배치하고 직접 게터에게 전화하십시오.라인상의 무엇인가(반코드):

watch: {
  itemId() {
    this.item = this.$store.getters['path/to/byId'][this.itemId]
  }
}

테스트할 수 있습니다.item우선, 그것이 더 잘 기능하는 경우(그럴 것이라고 생각합니다) - 보다 복잡한 태그에 워처를 추가합니다.

행운을 빕니다.

언급URL : https://stackoverflow.com/questions/52671666/efficiently-working-with-large-data-sets-in-vue-applications-with-vuex