Vue項目全局配置頁面緩存之按需讀取緩存的實現(xiàn)詳解

更新時間：2018年08月01日 09:20:20 作者：FrankCheung

這篇文章主要給大家介紹了關于Vue項目全局配置頁面緩存之實現(xiàn)按需讀取緩存的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧

寫在前面

一個web app的實際使用場景中，有一些情景的交互要求，是記錄用戶的瀏覽狀態(tài)的。最常見的就是在列表頁進入詳情頁之后，再返回到列表頁，用戶希望返回到進入詳情頁之前的狀態(tài)繼續(xù)操作。但是有些使用場景，用戶又是希望能夠獲取最新的數(shù)據(jù)，例如同級列表頁之間切換的時候。

如此，針對上述兩種使用場景，需要實現(xiàn)按需讀取頁面緩存。由于SPA應用的路由邏輯也是在前端實現(xiàn)的，因此可以在前端對路由的邏輯進行設置以實現(xiàn)所需效果。

使用技術

Vue.js作為主要框架
Vue-router作為前端路由管理器
Vuex作為狀態(tài)管理工具

總體思路

keep-alive判斷當前組件是否讀取緩存的節(jié)點，在整個生命周期里面非?？亢螅赼fterEach之后，基本在組件實例創(chuàng)建之前。（因此在此之前對當前組件是否讀取緩存進行處理都是可行的，我選擇在全局前置守衛(wèi)進行處理）

而判斷當前組件是否緩存的節(jié)點，則早于組件的beforeRouteLeave鉤子。

基于上述邏輯，本方案解決的邏輯是，對當前打開的頁面進行判斷，動態(tài)生成需要keepAlive的組件數(shù)組配置，對有可能需要緩存的先行進行緩存，然后在每次路由切換的時候，再進行判斷，按需讀取頁面緩存。

使用kepp-alive進行緩存，使用include屬性對需要緩存的頁面進行配置。
由于需要緩存的頁面配置系動態(tài)生成，所以使用vuex儲存該配置。
在路由元信息中寫入兩個配置，一是該路由是否需要緩存，二是從相關路由進入時才進行緩存的特定路由數(shù)組。
在beforeEach進行設置，每次進入路由之前，對進入的路由及其所有父級路由進行判斷，若需要緩存且命中特定路由數(shù)組，則將相關路由添加至緩存配置文件中；若不符合，則將相關路由刪除。（此步驟實現(xiàn)了路由切換時，需要則讀取緩存，不需要則重新獲取數(shù)據(jù)。）
使用全局mixin，進入相關組件之前，對當前路由進行判斷，如果需要緩存的則將該路由添加至緩存配置中。（此步驟實現(xiàn)了緩存當前打開的需要緩存的頁面。）

具體實現(xiàn)

1. 使用include屬性控制路由緩存

此處需要注意的是，include匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

但是vue-router的環(huán)境下，是沒有局部注冊名稱的，只能為組件補全name屬性。

因此，請務必給組件添加 name 選項，否則匿名組件將全部應用緩存。

<keep-alive :include="$store.state.cachedRouteNames">
 <router-view />
</keep-alive>

2. 添加全局路由緩存配置

// store/index.js

const store = new vuex.Store({
 state: {
 // 緩存的路由列表
 cachedRouteNames: [],
 },
 mutations: {
 UPDATE_CACHEDROUTENAMES(state,{ action, route }) {
  const methods = {
  'add': () => {
  state.cachedRouteNames.push(route)
  },
  'delete': () => {
  state.cachedRouteNames.splice(state.cachedRouteNames.findIndex((e) => { return e === route}),1)
  }
  }
  methods[action]()
 }
 }
})

3. 配置路由元信息，對需要緩存的路由進行配置

keepAlive表明路由需要被緩存，必須，否則不緩存

cacheWhenFromRoutes為數(shù)組，非必須，若為falsy值，則任何時候均緩存；若為空數(shù)組，則任何時候均不緩存

// router/index.js

{
 path: '/productslist',
 name: 'ProductsList',
 component: ProductsList,
 meta: {
 keepAlive: true,
 cacheWhenFromRoutes: ['ProductDetail'] // 此處配置的是路由的name
 }
},

4. 配置全局前置守衛(wèi)，按需讀取緩存

// routeControl.js

// 需要緩存的路由名稱數(shù)組
const cachedRouteNames = store.state.cachedRouteNames;

// 定義添加緩存組件name函數(shù)，設置的是組件的name
const addRoutes = (route) => {
 const routeName = route.components.default.name
 if (routeName && cachedRouteNames.indexOf(routeName) === -1) {
 store.commit('UPDATE_CACHEDROUTENAMES', { action: 'add', route: routeName })
 }
}

// 定義刪除緩存組件name函數(shù)，設置的是組件的name
const deleteRoutes = (route) => {
 const routeName = route.components.default.name
 if (routeName && cachedRouteNames.indexOf(routeName) !== -1) {
 store.commit('UPDATE_CACHEDROUTENAMES', { action: 'delete', route: routeName })
 }
}

router.beforeEach((to, from, next) => {
 
 // 處理緩存路由開始
 // 在讀取緩存之前，先對該組件是否讀取緩存進行處理
 to.matched.forEach((item, index) => {
 const routes = item.meta.cacheWhenFromRoutes;
 /**
  * 此處有幾種情況
  * 1. 沒有配置cacheWhenFromRoutes, 則一直緩存；
  * 2. 配置了cacheWhenFromRoutes，但是首次打開此web app，則from.name為空，此時應該將該頁面組件的name添加到緩存配置文件中
  * 3. 配置了cacheWhenFromRoutes，from.name不為空，若命中cacheWhenFromRoutes，則添加該頁面組件的name到緩存配置文件中，否則刪除。
  *
  **/
 if (item.meta.keepAlive && (!routes || (routes && (!from.name || routes.indexOf(from.name) !== -1)))) {
  addRoutes(item)
 } else {
  deleteRoutes(item)
 }
 
 })
 // 處理緩存路由結束

 new Promise(( resolve, reject ) => {
 // ..other codes
 }).then( res => {
 if ( res ) {
  next(res)
 } else {
  next()
 }
 })
})

// 全局混入。此步驟的目的是在該組件被解析之后，若是屬于需要緩存的組件，先將其添加到緩存配置中，進行緩存。

// 導航守衛(wèi)的最后一個步驟就是調用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調函數(shù)，此時整個組件已經(jīng)被解析，DOM也已經(jīng)更新。

Vue.mixin({
 beforeRouteEnter(to, from, next) {
 next(vm => {
  to.matched.forEach((item) => {
  const routeName = item.components.default.name
  if (to.meta.keepAlive && routeName && cachedRouteNames.indexOf(routeName) === -1) {
   store.commit('UPDATE_CACHEDROUTENAMES', { action: 'add', route: routeName })
  }
  })
 })
 },
})

寫在最后

坑點