#javascript #vue.js #vuex
#javascript #vue.js #vuex
Вопрос:
Я прочитал официальный пример Vuex о том, как изменить состояние элемента в массиве данных объектов.
editTodo (state, { todo, text = todo.text, done = todo.done }) {
const index = state.todos.indexOf(todo)
state.todos.splice(index, 1, {
...todo,
text,
done
})
}
Кажется немного излишним сначала найти индекс (первый цикл), выполнить сращивание и выполнить копирование с помощью оператора распространения ...todo
(будет ли это считаться вторым циклом?).
Следуя документам:
При добавлении новых свойств к объекту вы должны либо: использовать
Vue.set(obj, 'newProp', 123)
, либо заменить этот объект новым. Например, используя синтаксис распространения объекта:state.obj = { ...state.obj, newProp: 123 }
Существует только два способа установки / обновления свойств объекта.
В сценарии с большими данными это вызывает некоторые проблемы с производительностью. Есть ли лучший (более эффективный) способ обновить элемент в массиве объектов?
Комментарии:
1. Действительно ли это вызывает проблемы с производительностью? Если вам нужно было сделать это за один проход, и вы просто Меняете уже существующий элемент (т. Е. Не Добавляете его), вы могли
map
бы выполнить задачи, напримерstate.todos.map(todo => todo === todo ? { ...todo, text, done } : todo)
2. Это вызывает проблемы с производительностью, если вы фиксируете editTodo тысячи раз, один за другим. Было бы лучше собрать все измененные задачи в один
newTodos
и заменитьstate.todos
наnewTodos
один раз?3. Как одновременно изменяются тысячи задач в вашем приложении? Если вопрос чисто гипотетический, как такое количество записей нужно изменить в любой ситуации? Если они загружены откуда-то еще, сбросьте всю коллекцию.