Блог

Я создал простое приложение для выполнения задач, и при удалении элемента из моего хранилища vuex компонент, отображающий список задач, обновляется автоматически. При обновлении элемента задач с «ожидающий» на «завершенный» компонент не обновляется автоматически. Хранилище обновляется, но я думаю, что нет триггера, который говорит

эй, ресурс из массива был обновлен, пожалуйста, визуализируйте снова

Как я могу заставить его сделать это?

Я создал небольшой пример, показывающий, что я имею в виду, если вы удалите элемент todo, компонент обновится. Если вы нажмете на кнопку «Обновить», это не изменится.

https://codesandbox.io/s/x3wv1yp33w

Это проблема реактивности:

Vue не позволяет динамически добавлять новые реактивные свойства корневого уровня к уже созданному экземпляру. Однако можно добавить реактивные свойства к вложенному объекту, используя метод Vue.set (объект, ключ, значение) (источник)

В UPDATE_TODO мутации вашего хранилища измените эту строку:

 state.todos[todoIndex] = updatedTodo
  

к этому:

 Vue.set(state.todos, todoIndex, updatedTodo)
  

и, конечно, добавить import Vue from 'vue' в верхней части файла.
Это должно работать таким образом.