您好,登錄后才能下訂單哦!
需求
在開(kāi)發(fā)vue的項(xiàng)目中有遇到了這樣一個(gè)需求:一個(gè)視頻列表頁(yè)面,展示視頻名稱(chēng)和是否收藏,點(diǎn)擊進(jìn)去某一項(xiàng)觀看,可以收藏或者取消收藏,返回的時(shí)候需要記住列表頁(yè)面的頁(yè)碼等狀態(tài),同時(shí)這條視頻的收藏狀態(tài)也需要更新, 但是從其他頁(yè)面進(jìn)來(lái)視頻列表頁(yè)面的時(shí)候不緩存這個(gè)頁(yè)面,也就是進(jìn)入的時(shí)候是視頻列表頁(yè)面的第一頁(yè)
一句話(huà)總結(jié)一下: pageAList->pageADetail->pageAList, 緩存pageAList, 同時(shí)該視頻的收藏狀態(tài)如果發(fā)生變化需要更新, 其他頁(yè)面->pageAList, pageAList不緩存
在網(wǎng)上找了很多別人的方法,都不滿(mǎn)足我們的需求
然后我們團(tuán)隊(duì)幾個(gè)人搗鼓了幾天,還真的整出了一套方法,實(shí)現(xiàn)了這個(gè)需求
實(shí)現(xiàn)后的效果
無(wú)圖無(wú)真相,用一張gif圖來(lái)看一下實(shí)現(xiàn)后的效果吧?。。?/p>
操作流程:
說(shuō)明:
實(shí)現(xiàn)二級(jí)緩存
用vue-cli2的腳手架搭建了一個(gè)項(xiàng)目,用這個(gè)項(xiàng)目來(lái)說(shuō)明如何實(shí)現(xiàn)
先來(lái)看看項(xiàng)目目錄
刪除了無(wú)用的components目錄和assets目錄,新增了src/pages目錄和src/store目錄, pages頁(yè)面用來(lái)存放頁(yè)面組件, store不多說(shuō),存放vuex相關(guān)的東西,新增了server/app.js目錄,用來(lái)啟動(dòng)后臺(tái)服務(wù)
1. 前提條件
const express = require('express') // const bodyParser = require('body-parser') const app = express() let allList = Array.from({length: 30}, (v, i) => ({ id: i, name: '視頻' + i, isCollect: false })) // 后臺(tái)設(shè)置允許跨域訪(fǎng)問(wèn) // 前后端都是本地localhost,所以不需要設(shè)置cors跨域,如果是部署在服務(wù)器上,則需要設(shè)置 // app.all('*', function (req, res, next) { // res.header('Access-Control-Allow-Origin', '*') // res.header('Access-Control-Allow-Headers', 'X-Requested-With') // res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS') // res.header('X-Powered-By', ' 3.2.1') // res.header('Content-Type', 'application/json;charset=utf-8') // next() // }) app.use(express.json()) app.use(express.urlencoded({extended: false})) // 1 獲取所有的視頻列表 app.get('/api/getVideoList', function (req, res) { let query = req.query let currentPage = query.currentPage let pageSize = query.pageSize let list = allList.slice((currentPage - 1) * pageSize, currentPage * pageSize) res.json({ code: 0, data: { list, total: allList.length } }) }) // 2 獲取某一條視頻詳情 app.get('/api/getVideoDetail/:id', function (req, res) { let id = Number(req.params.id) let info = allList.find(v => v.id === id) res.json({ code: 0, data: info }) }) // 3 收藏或者取消收藏視頻 app.post('/api/collectVideo', function (req, res) { let id = Number(req.body.id) let isCollect = req.body.isCollect allList = allList.map((v, i) => { return v.id === id ? {...v, isCollect} : v }) res.json({code: 0}) }) const PORT = 3003 app.listen(PORT, function () { console.log('app is listening port' + PORT) })
2. 路由配置
在路由配置里面把需要緩存的路由的meta添加keepAlive屬性,值為true, 這個(gè)想必大家都知道,是緩存路由組件的
在我們項(xiàng)目里面,需要緩存的路由是pageAList,所以這個(gè)路由的meta的keepAlive設(shè)置成true,其他路由正常寫(xiě),路由文件src/router/index.js如下:
import Vue from 'vue' import Router from 'vue-router' import home from '../pages/home' import pageAList from '../pages/pageAList' import pageADetail from '../pages/pageADetail' import pageB from '../pages/pageB' import main from '../pages/main' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'main', component: main, redirect: '/home', children: [ { path: 'home', name: 'home', component: home }, { path: 'pageAList', name: 'pageAList', component: pageAList, meta: { keepAlive: true } }, { path: 'pageB', component: pageB } ] }, { path: '/pageADetail', name: 'pageADetail', component: pageADetail } ] })
3. vuex配置
vuex的store.js里面存儲(chǔ)一個(gè)名為excludeComponents的數(shù)組,這個(gè)數(shù)組用來(lái)操作需要做緩存的組件
state.js
const state = { excludeComponents: [] } export default state
同時(shí)在mutations.js里面加入兩個(gè)方法, addExcludeComponent是往excludeComponents里面添加元素的,removeExcludeComponent是往excludeComponents數(shù)組里面移除元素
注意: 這兩個(gè)方法的第二個(gè)參數(shù)是數(shù)組或者組件name
mutations.js
const mutations = { addExcludeComponent (state, excludeComponent) { let excludeComponents = state.excludeComponents if (Array.isArray(excludeComponent)) { state.excludeComponents = [...new Set([...excludeComponents, ...excludeComponent])] } else { state.excludeComponents = [...new Set([...excludeComponents, excludeComponent])] } }, // excludeComponent可能是組件name字符串或者數(shù)組 removeExcludeComponent (state, excludeComponent) { let excludeComponents = state.excludeComponents if (Array.isArray(excludeComponent)) { for (let i = 0; i < excludeComponent.length; i++) { let index = excludeComponents.findIndex(v => v === excludeComponent[i]) if (index > -1) { excludeComponents.splice(index, 1) } } } else { for (let i = 0, len = excludeComponents.length; i < len; i++) { if (excludeComponents[i] === excludeComponent) { excludeComponents.splice(i, 1) break } } } state.excludeComponents = excludeComponents } } export default mutations
4. keep-alive包裹router-view
將App.vue的router-view用keep-alive組件包裹, main.vue的路由也需要這么包裹,這點(diǎn)非常重要,因?yàn)閜ageAList組件是從它們的router-view中匹配的
<keep-alive :exclude="excludeComponents"><som-component></some-component></keep-alive>這個(gè)寫(xiě)法大家應(yīng)該不會(huì)陌生,這也是尤大神官方推薦的緩存方法, exclude屬性值可以是組件名稱(chēng)字符串(組件選項(xiàng)的name屬性)或者數(shù)組,代表不緩存這些組件,所以vuex里面的addExcludeComponent是代表要緩存組件,addExcludeComponent代表不緩存組件,這里稍微有點(diǎn)繞,請(qǐng)牢記這個(gè)規(guī)則,這樣接下來(lái)你就不會(huì)被繞進(jìn)去了。
App.vue
<template> <div id="app"> <keep-alive :exclude="excludeComponents"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { name: 'App', computed: { excludeComponents () { return this.$store.state.excludeComponents } } } </script
main.vue
<template> <div> <ul> <li v-for="nav in navs" :key="nav.name"> <router-link :to="nav.name">{{nav.title}}</router-link> </li> </ul> <keep-alive :exclude="excludeComponents"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { name: 'main.vue', data () { return { navs: [{ name: 'home', title: '首頁(yè)' }, { name: 'pageAList', title: 'pageAList' }, { name: 'pageB', title: 'pageB' }] } }, methods: { }, computed: { excludeComponents () { return this.$store.state.excludeComponents } }, created () { } } </script>
接下來(lái)的兩點(diǎn)設(shè)置非常重要
5. 一級(jí)組件
對(duì)于需要緩存的一級(jí)路由pageAList,添加兩個(gè)路由生命周期鉤子beforeRouteEnter和beforeRouteLeave
import {getVideoList} from '../api' export default { name: 'pageAList', // 組件名稱(chēng),和組件對(duì)應(yīng)的路由名稱(chēng)不需要相同 data () { return { currentPage: 1, pageSize: 10, total: 0, allList: [], list: [] } }, methods: { getVideoList () { let params = {currentPage: this.currentPage, pageSize: this.pageSize} getVideoList(params).then(r => { if (r.code === 0) { this.list = r.data.list this.total = r.data.total } }) }, goIntoVideo (item) { this.$router.push({name: 'pageADetail', query: {id: item.id}}) }, handleCurrentPage (val) { this.currentPage = val this.getVideoList() } }, beforeRouteEnter (to, from, next) { next(vm => { vm.$store.commit('removeExcludeComponent', 'pageAList') next() }) }, beforeRouteLeave (to, from, next) { let reg = /pageADetail/ if (reg.test(to.name)) { this.$store.commit('removeExcludeComponent', 'pageAList') } else { this.$store.commit('addExcludeComponent', 'pageAList') } next() }, activated () { this.getVideoList() }, mounted () { this.getVideoList() } }
6. 二級(jí)組件
對(duì)于需要緩存的一級(jí)路由的二級(jí)路由組件pageADetail,添加beforeRouteLeave路由生命周期鉤子
在這個(gè)beforeRouteLeave鉤子里面,需要先清除一級(jí)組件的緩存狀態(tài),如果跳轉(zhuǎn)路由匹配到一級(jí)組件,再緩存一級(jí)組件
beforeRouteLeave (to, from, next) { let componentName = '' // 離開(kāi)詳情頁(yè)時(shí),將pageAList添加到exludeComponents里,也就是將需要緩存的頁(yè)面pageAList置為不緩存狀態(tài) let list = ['pageAList'] this.$store.commit('addExcludeComponent', list) // 緩存組件路由名稱(chēng)到組件name的映射 let map = new Map([['pageAList', 'pageAList']]) componentName = map.get(to.name) || '' // 如果離開(kāi)的時(shí)候跳轉(zhuǎn)的路由是pageAList,將pageAList從exludeComponents里面移除,也就是要緩存pageAList this.$store.commit('removeExcludeComponent', componentName) next() }
7.實(shí)現(xiàn)方法總結(jié)
進(jìn)入了pageAList,就在beforeRouteEnter里緩存了它,離開(kāi)當(dāng)前組件的時(shí)候有兩種情況:
1 跳轉(zhuǎn)進(jìn)去pageADetail,在pageAList的beforeRouteLeave鉤子里面緩存pageAList,從pageADetail離開(kāi)的時(shí)候,也有兩種情況
(1) 回到pageAList,那么在pageADetail的beforeRouteLeave鉤子里面緩存了pageAList,所以這就是從pageAList-pageADetail-pageAList的時(shí)候,pageAList可以被緩存,還是之前的頁(yè)碼狀態(tài)
(2) 進(jìn)入其他路由,在pageADetail的beforeRouteLeave鉤子里面清除了pageAList的緩存
2 跳轉(zhuǎn)到非pageADetail的頁(yè)面,在pageAList的beforeRouteLeave鉤子里面清除pageAList的緩存
方案評(píng)估
自認(rèn)為用這個(gè)方案來(lái)實(shí)現(xiàn)緩存,最終的效果非常完美了
缺點(diǎn):
項(xiàng)目源碼
項(xiàng)目源碼的github地址 (本地下載),歡迎大家克隆下載
項(xiàng)目啟動(dòng)與效果演示
三級(jí)緩存
上面的方法二級(jí)緩存就夠了
上面我們說(shuō)的是兩個(gè)頁(yè)面,二級(jí)緩存的問(wèn)題,現(xiàn)在假設(shè)有三個(gè)頁(yè)面,A1-A2-A3,一步步點(diǎn)進(jìn)去,要求從A3返回到A2的時(shí)候,緩存A2,再?gòu)腁2返回A1的時(shí)候,緩存A1,大家可以自己動(dòng)手研究下,這里就不寫(xiě)了,其實(shí)就是上面的思路,留給大家研究。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。