С VueJS, как я могу интеллектуально сохранить состояние Vuex между компонентами?

Question

Сначала подумайте о таблице, в которой есть поиск, сортировка и разбиение на страницы. Элементы (строки) содержат детали, которые загружают маршрут для отображения компонента детализации. В этом подробном компоненте есть еще одна таблица с поиском, сортировкой и разбивкой на страницы, в которой также есть подробное представление для дальнейшего изучения.

Я использую vuex, чтобы сохранить состояние большинства компонентов, по крайней мере там, где это имеет смысл. В этом случае search query, sort и pagination все хранятся в магазине. Кроме того, я стараюсь максимально разделить свои компоненты, чтобы упростить тестирование и обеспечить лучшую ремонтопригодность.

Представьте себе эту структуру маршрутизации:

/ Свойства Показывает список объектов недвижимости

/ Свойства / местоположение / 1 Показывает список зданий в этом месте

/ Недвижимость / местоположение / 1 / здание / 1 Показывает список офисов в этом здании

Допустим, я на первом маршруте и ищу местоположение, из которого получается 3 записи, соответствующие поисковому запросу. Большой! Я нажимаю на первую, просматриваю некоторые детали ... и нажимаю Вернуться. Мой поиск все еще не поврежден, поскольку он был сохранен в vuex, поэтому мое состояние сохраняется. Совершенная.

Я перемещаюсь по другому маршруту, совершенно отдельно от раздела местоположений, а затем возвращаюсь назад. Фу, мой поиск все еще там. Это не то, что я ожидал (интуитивно), но ожидал бы программно.

Вот как я это решил. Пожалуйста, скажите мне, если есть лучший способ.

В моих маршрутах я всегда использую реквизиты, а в основном компоненте навигации я настроил его на передачу свойства clearState.

Итак, компонент имеет это:

props: {
  clearState: {
    type: Boolean,
    default() {
      return false;
    }
  }
},

created() {

  if (this.clearState) {
    this.$store.dispatch("properties/setSearch", "");
  }
  this.$store.dispatch("fetchLocations");       
}

А мой маршрут в главном меню навигации имеет такой вид:

<router-link :to="{ name: "Locations", params: { clearState: true }}">Locations</router-link>     

Это прекрасно работает. Но во время детализации у меня есть несколько слоев деталей, поэтому я чувствую, что я тесно связан:

created() {

  if (this.clearState) {
    this.$store.dispatch("properties/setSearch", "");
    this.$store.dispatch("buildings/setSearch", "");
    this.$store.dispatch("offices/setSearch", "");
  }
  this.$store.dispatch("fetchLocations");       
}

Я играл с охраной маршрутизатора, но доступ к this внутри компонента не сразу доступен, что замедляет запрос к моему API. Это также вынудило меня использовать мета-свойства, чтобы определить, какие маршруты должны вызывать очистку состояния.

Мой вопрос

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

1. Мое решение подвержено невидимой ошибке?
2. Есть ли лучший способ сделать это, которого я, очевидно, скучаю?

Надеюсь, это имеет смысл.