В Vuex Store у меня есть массив объектов. После удаления и добавления объекта в массив компонент перестает реагировать на свойства элемента массива. Понятия не имею, что я сделал не так.
У меня есть отдельная проблема в самом маленьком проекте на GitHub с шагами для воспроизведения, содержащимися в README.
Состояние Vuex содержит массив devices
с экземплярами класса Device
. В классе есть методы start
и stop
, которые имитируют некоторые реальные действия устройства с Обещаниями, разрешенными после истечения времени ожидания. Каждое устройство имеет свойство state
с двумя ключами: start
и stop
, каждое из которых получает значения 0 - начальное состояние, 1 - запуск / останов начался, 2 - запуск / останов завершен. Хранилище предоставляет доступ к массиву devices
через mapState
для компонента RunDevices
. Компонент имеет кнопки для отправки действий Store, останавливающих или запускающих все устройства, и имеет цветные fab-кнопки для отображения для каждого устройства значений state.start
(или state.stop
) разных цветов для разных целых чисел. Хранилище знает, что состояние устройства изменяется по мере его мутации.
Зло начинается, когда другой компонент Settings
удаляет устройство из массива и добавляет новое устройство в ту же позицию 1. При нажатии кнопки запуска, отображается правильный цвет состояния второго (индексированного 1) устройства start: 1
(запуск начался), но цвет для start: 2
(запуск завершен) никогда не отображается. В консоли я вижу это правильное состояние в Store.
Ситуация мгновенно разрешается, если какой-то хак (инициируемый из консоли) вызывает повторный рендеринг компонента.