Как изменить массив объектов в Vue

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 в качестве моего параметра в действии store, делает ли этотакже должен быть 2-й параметр для мутации?

Answer 1

Если вы ожидаете обновить несколько объектов одновременно, аргумент значения, указанный в мутации (engagement в коде выше), должен быть массивом.

Мы можем вернуть новое состояние 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
    })
  }
}

Рекомендуется избегать использования методов мутации массива внутри мутаций, чтобы гарантировать, что наблюдатели состояния будут уведомлены и реактивность будет работать как положено: всезначения состояния обновляются, а получатели пересчитываются.