Question

我正在尝试使用新值更新对象后对数组进行变异。目前，当我使用splice()时，它仅用于突变单个对象。也许我正在寻找简单的javascript方法，但是我想弄清楚如果同时更新多个对象，如何使数组变异？

这是我用于commit response.data

的存储操作

updateCheckedEngagements(context, checkedEnagements) {  
      axios.patch('/engagementsarray', {
        engagements: checkedEnagements.engagements,
        assigned_to: checkedEnagements.assigned_to,
        status: checkedEnagements.status
      })
      .then(response => {
          console.log(response.data)
          context.commit('updateCheckedEngagements', response.data)
      })
      .catch(error => {
          console.log(error.response.data)
      })           
    },

这是我当前设置的突变，但我认为这是不正确的

    updateCheckedEngagements(state, engagement) {
          const index = state.engagements.findIndex(item => item.id == engagement.id);
          state.engagements.splice(index, 1, {
            'id': engagement.id,
            'assigned_to': engagement.assigned_to,
            'status': engagement.status,
          })
        },

而且由于我在存储操作中将checkedEngagements作为参数传递，所以该变量也必须是第二个参数吗？

Answer 1

如果您希望同时更新多个对象，则突变（上面代码中的engagement中提供的value参数）应该是一个数组。

例如，我们可以使用以下代码以更新后的值返回engagements的新状态：

const actions = {
  updateCheckedEngagements(state, updatedEngagements = []) {
    // Create list of ids, to simplify index matching
    const ids = updatedEngagements.map(engagement => engagement.id)
    state.engagements = state.engagements.map(engagement => {
      // Check if updated engagement matches currently iterated one
      const matchedIndex = ids.indexOf(engagement.id)
      // If index matches, we shall replace current item with updated values
      if (matchedIndex !== -1) {
        return {
          ...updatedEngagements[matchedIndex]
        }
      }
      // Return previous value by default
      return engagement
    })
  }
}

避免在突变内部使用array mutating methods是一个好习惯，以确保状态观察者将得到通知并且反应性将按预期进行：更新所有状态值并重新计算getter。

如何在Vue中突变对象数组

1 个答案: