Preserve component state with vue-router?

Question

I have a listing/detail use case, where the user can double-click an item in a product list, go to the detail screen to edit and then go back to the listing screen when they're done. I've already done this using the dynamic components technique described here: https://vuejs.org/v2/guide/components.html#Dynamic-Components. But now that I'm planning to use vue-router elsewhere in the application, I'd like to refactor this to use routing instead. With my dynamic components technique, I used keep-alive to ensure that when the user switched back to the list view, the same selection was present as before the edit. But it seems to me that with routing the product list component would be re-rendered, which is not what I want.

Now, it looks like router-view can be wrapped in keep-alive, which would solve one problem but introduce lots of others, as I only want that route kept alive, not all of them (and at present I'm just using a single top level router-view). Vue 2.1 has clearly done something to address this by introducing include and exclude parameters for router-view. But I don't really want to do this either, as it seems very clunky to have to declare up front in my main page all the routes which should or shouldn't use keep-alive. It would be much neater to declare whether I want keep-alive at the point I'm configuring the route (i.e., in the routes array). So what's my best option?

Answer 1

You can specify the route you want to keep alive , like:

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

In this case, only home route will be kept alive

Answer 2

I had a similar problem and looked at Vuex but decided it would require too much changes/additions in my code to add to the project.

I found this library https://www.npmjs.com/package/vue-save-state which solved the problem for me, keeping the state of 1 component synchronized with localStorage, and it only took a few minutes and a few lines of code (all documented in the Github page of the package).

Answer 3

One solution without 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]);
  }
}

Answer 4

What seems to me is you are looking for some kind of state management. If you have data which is shared by multiple components and you want to render component in different order, but dont want to load data again for each component.

This works like following:

Vue offers a simple state management, but I will recommend to use Vuex which is a standard for state management among vue community.

Answer 5

Vue 3

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

Exactly as is, you don't need a Component attribute in the App.vue. Also your this'll work even if your components don't have a name property specified.