Suppose that in a list, the user slides a few pages to click on details, then if he returns to the list page, the page state has been refreshed, and the user needs to slide again, which is obviously unreasonable.

On the PC side we have a lot of natural advantages to deal with this problem, such as using pagers to make lists not too long, such as opening details to jump to a new TAB, or making details pages into drawers, into masks pop-ups and so on. However, in mobile development, there is no way to avoid this problem, so sometimes it is necessary to record the state of the page so that the user can return to the page as it was.

In Vue, we can easily cache the page using keep-alive. In general, we can rewrite the routing view as follows:

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
    <router-view v-if=! "" $route.meta.keepAlive"></router-view>
Copy the code

The above use of two if judgments, otherwise will not be effective

<! --><keep-alive v-if="$route.meta.keepAlive">
    <router-view></router-view>
</keep-alive>
    <router-view v-else></router-view>
Copy the code

Then we can set meta on the page route that needs caching:

{
    path: "/activityList".name: "activityList".title: "Activity List".meta: { keepAlive: true },
    component: () = > import("@/pages/activity/list.vue")}Copy the code

KeepAlive hooks create and Mounted are only executed once when keepAlive is used. Mounted and keepAlive hooks are only executed once when keepAlive is used.

activated() {
    // return to page
},
deactivated() {
    // The page leaves
},
Copy the code

In addition to using the keepAlive there is a side effect, we will find that the page cannot be uninstalled, also is the destruction of the life cycle of no longer trigger, and when the user leave list page, in turn into the list page, list page should be initialized state rather than the cache state, etc., which makes the business logic code multifarious.

In order to solve the above problems, we use include mode provided by Vue to replace if judgment

    <keep-alive :include="keepPages">
        <router-view></router-view>
    </keep-alive>
Copy the code

And Vuex is used to manage state

  computed: {
    keepPages() {
      return this.$store.getters.getKeepPages
    }
  }
Copy the code

Mutation code:

  changeKeepPages(state, status) {
    state.keepPages = status;
  },
  keepThisPage(state, status) {
    const arr = state.keepPages.split(",");
    arr.push(status);
    state.keepPages = arr + "";
  },
  removeThisPage(state, status) {
    const arr = state.keepPages.split(",");
    const index = arr.findIndex(x= > x === status);
    if (index > 0) {
      arr.splice(index, 1);
    }
    state.keepPages = arr + "";
  }
Copy the code

Then we write a mixin that will set the page/component to cache:

export default {
  created() {
    if (!this.$options.name) {
      console.warn("Page caching failed! No component name set!");
    }
    this.$store.commit("keepThisPage".this.$options.name);
  },
  beforeDestroy() {
    console.log("Trigger component destruction")}};Copy the code

The destroy page can be used actively:

this.$store.commit('removeKeepPages'.'xxx') // XXX is the name of the page to be destroyed
Copy the code

It can also clear all cached pages, such as when the user returns to the home page:

this.$store.commit('changeKeepPages'.'index') // index does not have any real meaning. After testing for null include, all pages will be cached.
Copy the code

I used the following method to trigger the destruction event of the previous list page when I got back to the home page, which made the whole process very comfortable and avoided a memory leak to some extent. These are the keepAlive tips in Vue, hope to help you.