keep-alive + vuex + vue-router dynamic page caching h5

Vue h5 use in the company to write more than a year, thinking summarize some experience under the period, there may be a better approach, also welcome Gangster correction.

The first major article on how to write dynamic cache h5 page.

To make h5 experience is good enough, the best way is to make full use of the cache, rather than every time a request to the backend data.

When the need to get the following when there is such a demand, users enter a list from the Home Page B A new real-time data, then click on a message into the details page C, then B returns a list of pages, hoping to take advantage of cached data is not sent directly to request and remember scrolling list page B current position.

Vue understanding of children's shoes might think of keep-alive, but how to control the page cache when to use and when not in use? Here I used vuex need to save to save a cached page name.

First of all, first in the top of the page App.vue most in the following settings keep-alive:

<template>
  <keep-alive :include="cacheComponents">
    <router-view />
  </keep-alive>
</template>

<script>
...
computed: {
    ...mapState(['cacheComponents']),
   ...
}
</script>
...
复制代码

CacheComponents which is the name of the array needs to be cached page components of the composition, maintaining the global state vuex inside.

state.js file

const state = {
    cacheComponents: ['B'],
}

export default state;
复制代码

mutation.js file

const mutations = {
  ADD_CACHE_COMPONENT(state, component = {}) {
    if (!state.cacheComponents.includes(component.name)) {
      state.cacheComponents = [...state.cacheComponents, component.name];
    }
  },

  REMOVE_CACHE_COMPONENT(state, component = {}) {
    if (state.cacheComponents.indexOf(component.name)) {
      state.cacheComponents.splice(
        state.cacheComponents.indexOf(component.name),
        1,
      );
    }
  },
};

export default mutations;
复制代码

So that we can operate on the global state of the array cacheComponents by vuex of commit, you need to dynamically control the cached page.

So how can we change cacheComponents know at what time it? In fact, may be utilized in the router beforeEach vue-router listens example, as follows

route.js file

import Vue from 'vue';
import Router from 'vue-router';
import routes from './route-list';
import store from '@/common/store';
import cachedCompHandler from '@/common/utils/cachedCompHandler';

Vue.use(Router);

const router = new Router({
  routes,
});

router.beforeEach((to, from, next) => {
  cachedCompHandler(to, from, store);
  ...
}
复制代码

Wherein cachedCompHandler follows, when entering B from A, B is removed from the cacheComponents, plus or B:

export default function cachedCompHandler(to, from, store) {
  if (from.name === 'A' && to.name === 'B') {
    store.commit('REMOVE_CACHE_COMPONENT', {
      name: 'B',
    });
  } else {
    store.commit('ADD_CACHE_COMPONENT', {
      name: 'B',
    });
  }
}
复制代码

And finally there will be a problem, if this is a list that is pending, the user clicks on an item to enter the details page, when the return of hope that is not listed, but does not have to send a request using the cache.

This time we should keep-alive with the life cycle of corresponding vue activated / deactivated, and hook the life cycle is to be the only trigger of keep-alive components.

When the user successfully dealt with a matter, you can return a list of id pass back through localstorage or url, activated B hook in the list page, the corresponding data will be maintained in the component data in the state can be cleared.

Here on the relevant experience of dynamic cache h5 to share over, if a better way please correct me.

Another recent'm writing a compiler React Vue code into the code converter, we welcome the review.

github.com/mcuking/vue…

Reproduced in: https: //juejin.im/post/5d05ca7051882570ec017be6