通过突变和动作处理 Vuex 大数组

Question

我有一个必须处理的大约 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 函数内容？

Answer 1

您可以在外部范围内定义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))
        }
    }
})