时间戳

首页 > 解决方案 > 使用 VueJS，如何智能地保留组件之间的 Vuex 状态？

vuejs2 - 使用 VueJS，如何智能地保留组件之间的 Vuex 状态？

问题描述

首先，考虑一个具有搜索、排序和分页功能的表。项目（行）有详细信息，它会加载一个路由来显示详细信息组件。在这个详细信息组件中，还有一个带有搜索、排序和分页功能的表格，其中还有一个详细信息视图可以进一步深入研究。

我vuex用来保留大多数组件的状态，至少在有意义的地方。在这种情况下，search query、sort和pagination都存储在存储中。另外请记住，我正在尝试尽可能多地解耦我的组件，以使测试更容易并提供更好的可维护性。

想象一下这个路由结构：

/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>

这很好用。但是，当我们向下钻取时，我有好几层细节组件，所以现在我觉得我正在紧密耦合：

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. 有没有更好的方法来做到这一点，我显然错过了？

我希望这是有道理的。

标签： vuejs2vuex

解决方案

推荐阅读