Vuejs2 使用VueJS，如何在组件之间智能地保留Vuex状态？

首先，考虑一个具有搜索、排序和分页功能的表。项目（行）具有详细信息，这将加载管线以显示详细信息构件。在这个细节组件中，还有另一个具有搜索、排序和分页功能的表，其中还有一个细节视图可供进一步深入查看

我使用

vuex

来保留大多数组件的状态，至少在有意义的地方。在这种情况下，

搜索查询

、

排序

和

分页

都存储在存储中。还要记住，我正在尽可能地解耦我的组件，以使测试更容易，并提供更好的可维护性

想象一下这种路由结构：

/Properties显示属性位置列表

/Properties/location/1显示该位置内的建筑列表

/Properties/location/1/building/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>     

主导航菜单中的“我的路线”有：

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>     

我玩过路由器防护，但无法立即访问组件中的

此

，这会减慢对我的API的请求。它还迫使我使用元属性来确定往返路由应该强制清除哪些状态

我的问题

我已经解决了我的问题，但我有一种直觉，我还没有找到更好的设计模式

我的解决方案容易出现看不见的错误吗

有没有更好的方法来做这件事，我显然错过了

---

我希望这是有意义的。

我认为您可以使用vue路由器的导航卫士清除其中的数据store@jacky谢谢，但我知道。这不是一个问题，而是一个潜在的设计变更，以获得所需的智能。