是否使用vue-router保留组件状态？

Question

我有一个列表/详细信息用例，其中用户可以双击产品列表中的项目，转到详细信息屏幕进行编辑，然后在完成编辑后返回到列表屏幕。我已经使用这里描述的动态组件技术做到了这一点：https://vuejs.org/v2/guide/components.html#Dynamic-Components。但现在我计划在应用程序中的其他地方使用vue-router，我想重构它以使用路由。使用我的动态组件技术，我使用了keep-alive来确保当用户切换回列表视图时，会出现与编辑前相同的选择。但在我看来，通过路由，产品列表组件将被重新呈现，这不是我想要的。

现在，看起来路由器视图可以被包装在keep-alive中，这将解决一个问题，但会引入许多其他问题，因为我只想让该路由保持活动状态，而不是所有路由(目前我只使用一个顶级路由器视图)。Vue 2.1通过为路由器视图引入包含和排除参数，显然已经解决了这个问题。但是我也不想这样做，因为在我的主页前面声明所有应该或不应该使用keep-alive的路由似乎非常笨拙。在配置路由时(即，在routes数组中)声明是否希望保持活动会更简洁。那么我最好的选择是什么呢？

Answer 1

您可以指定要保持活动状态的路由，如下所示：

<keep-alive include="home">
  <router-view/>
</keep-alive>

在这种情况下，只有本地路由将保持活动状态

Answer 2

我也遇到了类似的问题，并查看了Vuex，但我认为它需要在代码中进行太多的更改/添加才能添加到项目中。

我找到了这个库https://www.npmjs.com/package/vue-save-state，它为我解决了这个问题，使1个组件的状态与localStorage保持同步，并且只需要几分钟和几行代码(所有这些都记录在包的Github页面中)。

Answer 3

一个没有localStorage的解决方案：

import {Component, Provide, Vue} from "vue-property-decorator";

@Component
export default class Counter extends Vue {
  @Provide() count = 0

  /**
   * HERE
   */
  beforeDestroy() {
    Object.getPrototypeOf(this).constructor.STATE = this;
  }

  /**
   * AND HERE
   */
  beforeMount() {
    const state = Object.getPrototypeOf(this).constructor.STATE;
    Object.entries(state || {})
        .filter(([k, v]) => /^[^$_]+$/.test(k) && typeof v !== "function")
        .forEach(([k]) => this[k] = state[k]);
  }
}