принудительно перестраивать компонент при изменении маршрута или состояния vuex

Question

Я хочу попасть в VueJs / Vuex и создал небольшое приложение todo. Есть три ссылки для "всех задач", "ожидающих" и "завершенных". Это тот же маршрут, но с другим filter запросом.

При изменении маршрута компонент не будет обновляться, поскольку кажется, что обновленный запрос не вызывает обновления компонента. Но событие computed срабатывает.

Я создал небольшой пример, показывающий мою текущую проблему

https://codesandbox.io/s/6zx2p0m20r

Если щелкнуть ссылки todo, обновления компонента не будет. Если перейти к «другому маршруту» и вернуться назад, компонент был обновлен (из-за совершенно другого маршрута).

Как я могу принудительно обновить компонент при обновлении запроса в рамках того же базового маршрута?

Answer 1

Вы можете добавить навигационную охрану beforeRouteUpdate для повторной инициализации ваших данных:

beforeRouteUpdate вызывается, когда маршрут, который отображает этот компонент, был изменен, но этот компонент повторно используется в новом маршруте..

Например, для маршрута с динамическими параметрами /foo/:id, когда мы перемещаемся между /foo/1 и /foo/2, один и тот же экземпляр компонента Foo будет повторно использован, и этот ловушечный объект будет вызываться, когдаэто происходит.

( источник )

---

beforeRouteUpdate(to, from, next) {
  this.currentTodoFilter = to.query.filter
  next()
}

Вы также можете удалить свой метод updateTodoFilter таким способом.