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

寫在前面

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

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

使用技術(shù)

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

總體思路

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

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

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

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

具體實(shí)現(xiàn)

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

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

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

因此，請(qǐng)務(wù)必給組件添加 name 選項(xiàng)，否則匿名組件將全部應(yīng)用緩存。

<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. 配置路由元信息，對(duì)需要緩存的路由進(jìn)行配置

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

cacheWhenFromRoutes為數(shù)組，非必須，若為falsy值，則任何時(shí)候均緩存；若為空數(shù)組，則任何時(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ù)，設(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ù)，設(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) => {
 
 // 處理緩存路由開始
 // 在讀取緩存之前，先對(duì)該組件是否讀取緩存進(jìn)行處理
 to.matched.forEach((item, index) => {
 const routes = item.meta.cacheWhenFromRoutes;
 /**
  * 此處有幾種情況
  * 1. 沒有配置cacheWhenFromRoutes, 則一直緩存；
  * 2. 配置了cacheWhenFromRoutes，但是首次打開此web app，則from.name為空，此時(shí)應(yīng)該將該頁(yè)面組件的name添加到緩存配置文件中
  * 3. 配置了cacheWhenFromRoutes，from.name不為空，若命中cacheWhenFromRoutes，則添加該頁(yè)面組件的name到緩存配置文件中，否則刪除。
  *
  **/
 if (item.meta.keepAlive && (!routes || (routes && (!from.name || routes.indexOf(from.name) !== -1)))) {
  addRoutes(item)
 } else {
  deleteRoutes(item)
 }
 
 })
 // 處理緩存路由結(jié)束

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

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

// 導(dǎo)航守衛(wèi)的最后一個(gè)步驟就是調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，此時(shí)整個(gè)組件已經(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 })
  }
  })
 })
 },
})

寫在最后

坑點(diǎn)

• 此方案涉及兩個(gè)name，一個(gè)是設(shè)置特定路由時(shí)，使用路由的name。另一個(gè)是動(dòng)態(tài)生成緩存配置文件時(shí)，使用的是頁(yè)面組件的name。
• 務(wù)必給組件添加name屬性，便于include屬性的使用，也方便調(diào)試跟蹤。如果組件缺少name屬性，將會(huì)默認(rèn)使用緩存。
• 動(dòng)態(tài)處理緩存配置時(shí)，一定要對(duì)to.matched進(jìn)行遍歷，否則嵌套路由的父級(jí)路由的緩存就無(wú)法生效，將導(dǎo)致子路由的緩存也無(wú)法生效。
• 全局混入有一定危險(xiǎn)性，慎用...

以上是實(shí)踐過(guò)程中摸索出來(lái)的一種解決方案，我相信存在更加優(yōu)雅高效的解決方式。如果你正好實(shí)踐過(guò)相關(guān)方法，煩請(qǐng)指正，謝謝。

更多參考

github.com/vuejs/vue/i…

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。