1 introduction

The reason was a previous need to implement tabbed functionality similar to traditional backend management pages.

Requirements are as follows:

  1. Click the left menu bar to add a TAB page on the top of the main page
  2. TAB page can be clicked to switch to the page, can also be clicked to close
  3. When the TAB page exists, the switch page needs to cache the data on the page. When the TAB is closed, the cached data needs to be cleared.

2 Preliminary Solution

At that time, the first thing that came to mind was the keep-alive component of VUE. Then, the label data was stored in VUEX. By adding and deleting data, the include attribute of Keep-Alive was controlled to achieve the function of data cache.

3 Problems encountered

As for the principle of keep-alive, it determines the component’s name attribute value and caches the instance of the component until the next time.

Ordinary pages actually no problem, can be used normally. However, there is a kind of reusable page in our development, such as a list page, in which each list is linked to a detail page. Normally, we just carry an ID parameter to the route, and then open the detail page. The detail page is actually reused, but the name of the page is the same. In this case, keep-Alive will only cache the latest component instance, which is not functional.

4 Try to solve

Can the page state be saved using JS?

With this idea in mind, I tried to make a set of processes. The core implementation is the routing event in the page to let the reuse page store the data in its own variables, and judge whether it needs to be retrieved through the id passed in. Then, when the TAB is closed, a method is called to determine whether the data on the reused page is cleared.

Although the function is implemented, the reuse page has not written the logic code of the business, it is already very bloated, and when the TAB page is closed, it needs to add a very coupled clearing event. Very unfriendly, or later abandoned this way, reuse pages do not cache.

5 New Ideas

Here is my new implementation of page caching, using a VUE component I implemented based on keep-alive all-keep-alive. It perfectly solves the above reuse page cache problem, and reuse page does not need to add any function.

Sample page

This was inspired when I was learning the source code of Keep-Alive, but I didn’t have time to write it, so I finally found time to finish it.

The keep-alive cache is implemented by matching the name of the component and generating a key through the CID and tag instances of the vNode. The key is used to obtain the cache. The cache here is not JS data, but componentInstance, an instance of the component VNode. Keep-alive is equivalent to using the instance to render the page directly, which implements the function of caching.

Based on this core function, I changed the name to the component’s routing parameter, because the routing parameter must be fixed, based on this judgment, can achieve all the pages of the cache.

See my Github for details

all-keep-alive

Note: this is the version of VUe2!!

The official version of VUE3 came out last week, I will add a version of VUE3 later

Welcome to star, provide issues.

5, thank you

First of all, thank you for your browsing, I hope you can move your hands to give us a thumbs up, thank you.

This article is formatted using MDNICE