돌연변이 및 동작을 통한 Vuex 빅 어레이 처리

돌연변이 및 동작을 통한 Vuex 빅 어레이 처리

저는 약 1k의 배열을 가지고 있습니다.10k 요소를 처리해야 합니다.어레이가 Vuex 상태로 저장되고 있습니다.사용자는 단일 요소 또는 모든 요소를 처리할 수 있어야 합니다.처음에는 어레이가 상당히 작았을 때 단일 요소 처리를 위해 변환을 사용하고 모든 요소 처리를 위해 동작을 사용했습니다.그래서 코드는 다음과 같았습니다.

new Vuex.Store({
  state: {
    array: [el1, el2, el3...]
  },
  mutations: {
    processEl: (state, el) => {
      ...
    }
  },
  actions: {
    processAll: context => {
      context.state.array.forEach(el => context.commit('processEl', el))
    }
  }
})

안타깝게도 어레이가 계속 성장함에 따라 작업 성능이 점점 더 저하되었기 때문에 다음과 같은 해결책은 다음과 같습니다.

new Vuex.Store({
  state: {
    array: [el1, el2, el3...]
  },
  mutations: {
    processEl: (state, el) => {
      ...
    },
    processAll: (state, el) => {
      function processEl (el) {
        ...
      }
      state.array.forEach(el => processEl(el))
    }
  }
})

훨씬 더 잘 작동하지만 더 우아한 해결책이 있습니까?processEl기능 내용?

정의할 수 있습니다.processEl에서 호출할 수 있도록 외부 범위에서 기능processEl그리고.processAll.

function processEl (state, el) {
    ...
}

new Vuex.Store({
    state: {
        array: [el1, el2, el3...]
    },
    mutations: {
        processEl,
        processAll (state) {
            state.array.forEach(el => processEl(state, el))
        }
    }
})

언급URL : https://stackoverflow.com/questions/51963372/vuex-big-array-processing-via-mutations-and-actions