VueX 변환 최적화

VueX 변환 최적화

현재 VueX 스토어를 사용하고 있으며 어레이 전체에 푸시하는 변환이 1개 있습니다.현재는 모든 것이 동작하고 있습니다만, 이 코드를 보다 심플하게, 보다 적은 회선으로, 보다 최적화 할 수 있는지 알고 싶습니다.참고로 이것들은 배열에 저장되어 있는 오브젝트입니다.

PUSH_TO_ALL: (state, data) => {
    const found = state.all.find((one, i) => {
      if (one.slug === data.slug) {
        state.all[i] = data // modify current state
        return true
      }
      return false
    })
    if (!found) {
      state.all.push(data) // add to the state
    }
  }

제 첫 번째 생각은, 만약 당신이 이 두 가지를 비교한다면slug에data어레이 내의 모든 오브젝트에서는 일의여야 합니다(다만, 복수의 오브젝트를 치환할 필요가 있습니다).find).

즉, 스테이트의 '루트'를 어레이로 하는 것이 아니라 오브젝트를 사용하여 인덱스를 작성함으로써 훨씬 더 빠르고 심플하게 작업을 진행할 수 있습니다.slug.

그러면 코드는 다음과 같이 바뀝니다.

PUSH_TO_ALL: (state, data) => {
    state.all[data.slug] = data

이 방법에는 두 가지 장점이 있습니다. 즉, 오브젝트가 이미 존재하는지 여부를 확인하기 위해 모든 상태를 확인할 필요가 없기 때문에 상태를 수정하는 것이 훨씬 간단하고 빠릅니다.둘째, 새로운 오브젝트 추가와 이미 존재하는 경우 치환을 구분하기 위해 별도의 코드가 필요하지 않습니다.

어떤 이유로 상태를 배열로 저장해야 하는 경우 상태를 추적하는 개체를 유지하기 위해 다른 부분을 사용합니다.slug배열 인덱스로 이동합니다.그러면 코드는 다음과 같습니다.

PUSH_TO_ALL: (state, data) => {
        if (state.map[data.slug]) {
          state.all[state.map[data.slug]] = data
        } else {
          // Push returns length of array - index is len-1
          state.map[data.slug] = state.all.push(data) - 1
        }

주의 - Vue2에서는 를 사용해야 할 수 있습니다.Vue.set()네스트된 개체를 업데이트하지 않으면 코드가 이러한 변경에 반응하지 않을 수 있습니다.Vue3에는 더 이상 이 제한이 없습니다.

Array.find 대신 Array.findIndex를 사용하여 3진법과 페어링하여 사소한 로직을 보다 간결하게 할 수 있습니다(단, 명확할 필요는 없습니다).

const mutations = {
  PUSH_TO_ALL: (state, data) => {
    const indexOfMatchingSlug = state.all.findIndex(one => one.slug === data.slug);
    state.all[indexOfMatchingSlug] = data ? indexOfMatchingSlug > -1 : state.all.push(data);
  }
}

Array.findIndex 매뉴얼

JavaScript 3진 연산자 문서

언급URL : https://stackoverflow.com/questions/67943579/vuex-mutation-optimization