VueX 突变优化

Question

我目前正在使用 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
    }
  }

Answer 1

我的第一个想法是，如果你将data中的slug与数组中每个对象中的slug进行比较，它必须是唯一的（否则你将替换[=14中的多个对象=]).

这意味着，如果您将状态的 'root' 转换为数组，而改为使用由 [=12= 索引的对象，则几乎可以肯定会使事情变得更快、更简单].

然后你的代码会变成这样：

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 不再有这个限制。

Answer 2

您可以使用Array.findIndex代替Array.find，并将其与三元配对以使琐碎的逻辑更简洁（但不一定更清晰）。

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 documentation

JavaScript ternary operator documentation

VueX 突变优化

VueX Mutation Optimization

javascript

javascript-objects

vue.js

vuex