keep-alive + vuex + vue-router 實現動態緩存 h5 頁面

在公司使用 vue 寫 h5 已經一年多了，想着總結下期間的一些心得，可能會有更好的作法，也歡迎各位大佬指正。

第一篇主要寫如何動態緩存 h5 頁面。

爲了讓 h5 體驗足夠好，一個最好的方式就是充分利用緩存，而不是每次都會向後端請求數據。

下面有這樣一個需求，用戶從首頁 A 進入某個列表頁 B 時須要實時獲取最新的數據，而後點擊某條消息進入詳情頁 C，再返回列表頁 B 時，但願可以直接利用緩存數據不發送請求，並記住當前列表頁 B 滾動的位置。

瞭解 vue 的童鞋可能都會想到 keep-alive，但又如何控制頁面何時利用緩存何時不用呢？這裏我用到了 vuex 來保存保存須要緩存的頁面名字。

首先，先在應用最頂層的頁面 App.vue 裏以下設置 keep-alive:

<template>
  <keep-alive :include="cacheComponents"> <router-view /> </keep-alive> </template> <script> ... computed: { ...mapState(['cacheComponents']), ... } </script> ... 複製代碼

其中 cacheComponents 是須要緩存的頁面組件的名稱組成的數組，維護在 vuex 的全局狀態裏面。

state.js 文件

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

export default state;
複製代碼

mutation.js 文件

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;
複製代碼

這樣咱們就能夠經過 vuex 的 commit 對全局 state 中的 cacheComponents 數組進行操做，來動態控制須要緩存的頁面。

那麼咱們又如何知道在何時改變 cacheComponents 呢？其實能夠利用 vue-router 中router 實例的 beforeEach 進行監聽，以下

route.js 文件

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);
  ...
}
複製代碼

其中 cachedCompHandler 方法以下，當從 A 進入 B 時， 從 cacheComponents 去除 B , 不然加上 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',
    });
  }
}
複製代碼

最後又會有一個問題，就是若是這個是一個待審批的列表，用戶點擊某項進入詳情頁，返回的時候但願該項不在列表裏，但同時又要利用緩存不發送請求。

這個時候就要配合 keep-alive 對應的 vue 生命週期 activated / deactivated了，這個生命週期就是被 keep-alive 的組件惟一可以觸發的鉤子。

當用戶成功處理了某個事項，返回列表時能夠經過 localstorage 或 url 將 id 傳回來，在列表頁面 B 中的 activated 鉤子裏，將維護在組件狀態 data 裏的對應數據進行清除便可。

這裏關於動態緩存 h5 的相關心得就分享完了，若有更好的方式歡迎指正。

另外最近正在寫一個編譯 Vue 代碼到 React 代碼的轉換器，歡迎你們查閱。

github.com/mcuking/vue…