引入

在使用vue + vue-router開(kāi)發(fā)SPA的時(shí)候，有沒(méi)有遇到過(guò)這樣的情況：當(dāng)我們?cè)诹斜眄?yè)和詳情頁(yè)之間切換的時(shí)候，如果列表頁(yè)不做緩存，會(huì)導(dǎo)致每次從詳情頁(yè)返回時(shí)，列表頁(yè)都會(huì)重新加載。如下圖：

細(xì)心的朋友已經(jīng)發(fā)現(xiàn)了，當(dāng)從詳情頁(yè)返回列表頁(yè)的時(shí)候，列表頁(yè)重載了，這樣的體驗(yàn)顯然不好，這時(shí)我們可以對(duì)列表頁(yè)進(jìn)行緩存處理。

keep-alive實(shí)現(xiàn)頁(yè)面緩存

我們的項(xiàng)目不一定所有頁(yè)面都需要做緩存處理，所以這里介紹兩種按需緩存的方法：

方法一：

首先在定義路由的時(shí)候配置 meta 字段，自定義一個(gè)KeepAlive字段作為該頁(yè)面是否緩存的標(biāo)記：

routes:[{
 path: '/search',
 name: 'search',
 component: search,
 meta: {
  title: '搜索列表頁(yè)',
  keepAlive: true // 標(biāo)記列表頁(yè)需要被緩存
 }
},
{
 path: '/detail',
 name: 'detail',
 component: detail,
 meta: {
  title: '詳情頁(yè)',
  // 詳情頁(yè)不需要做緩存，所以不加keepAlive標(biāo)記
 }
}]

由于<keep-alive>組件不支持v-if指令，所以我們?cè)贏pp.vue中采用兩個(gè)<router-view>的寫(xiě)法，通過(guò)當(dāng)前路由的keepAlive字段來(lái)判斷是否對(duì)頁(yè)面進(jìn)行緩存：

<div id="app">
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />
</div>

方法二

使用<keep-alive>提供的 exclude 或者 include 選項(xiàng)，此處我們使用 exclude ，在App.vue中：

<div id="app">
 <keep-alive exclude="detail">
  <router-view />
 </keep-alive>
</div>

需要注意的是，一定要給頁(yè)面組件加上相應(yīng)的name，例如在detail.vue中：

<script>
export default {
 name: 'detail', // 這個(gè)name要和keep-alive中的exclude選項(xiàng)值一致
 ...
}
</script>

這么寫(xiě)就代表了在項(xiàng)目中除了name為detail的頁(yè)面組件外，其余頁(yè)面都將進(jìn)行緩存。

特殊情況優(yōu)化：

如果詳情頁(yè)也做了keep-alive，那么列表頁(yè)和詳情頁(yè)切換時(shí)，滾動(dòng)位置可能會(huì)相互影響，這時(shí)需要在 Router 實(shí)例中提供一個(gè) scrollBehavior 方法：

export default new Router({
 scrollBehavior (to, from, savedPosition) {
 	if (savedPosition) {
 		return savedPosition
 	} else {
 		return { x: 0, y: 0 }
 	}
 },
 routes: [...],
})

效果展示

效果看似很不錯(cuò)，實(shí)現(xiàn)了列表頁(yè)的緩存。但這其實(shí)并不靈活，比如返回首頁(yè)再進(jìn)入這個(gè)搜索頁(yè)的時(shí)候，由于沒(méi)做任何處理，所以這個(gè)搜索頁(yè)它仍處于之前的狀態(tài)：

然而，我希望凡是從首頁(yè)進(jìn)入搜索頁(yè)，頁(yè)面數(shù)據(jù)都需要重置回初始狀態(tài)，有沒(méi)有什么方可以靈活控制頁(yè)面數(shù)據(jù)是否需要重置呢？這時(shí)我的腦海里浮現(xiàn)了vue生態(tài)系統(tǒng)中的狀態(tài)管理庫(kù)vuex。

借助vuex使頁(yè)面更靈活

需求分析： 我們需要一個(gè)全局的flag來(lái)控制每次進(jìn)入緩存頁(yè)時(shí)，數(shù)據(jù)是否需要重置，正好vuex能做到。

vuex搞起來(lái)

安裝

npm install vuex --save

 配置vuex

為了方便日后維護(hù)，可以創(chuàng)建一個(gè)store目錄專門(mén)存放vuex的模塊代碼，目錄結(jié)構(gòu)參考下圖：

state.js:

const state = {
 refreshSearch: true // 標(biāo)記是否刷新搜索頁(yè)
}

export default state

mutation.js

const matutaions = {
 setRefreshSearch(state, flag) {
  state.refreshSearch = flag
 }
}
 
export default matutaions

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
 state,
 mutations
})

在入口文件main.js中：

import store from './store' //這里是指向store目錄中的index.js
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

這樣，我們就相當(dāng)于用vuex創(chuàng)建了一個(gè)用來(lái)判斷頁(yè)面是否需要重置的標(biāo)記了。

為所欲為地重置你的緩存頁(yè)中的數(shù)據(jù)

在哪里重置

keep-alive的組件有個(gè)特有的生命周期鉤子activated()。activated()會(huì)在keep-alive的組件每次激活時(shí)調(diào)用，而created()只有創(chuàng)建的時(shí)候會(huì)被調(diào)用一次，再次激活就不會(huì)被調(diào)用了。所以這里我們需要在activated()鉤子中重置我們的頁(yè)面數(shù)據(jù)。

 在activated()中想重置就重置

這里要借助vuex中的refreshSearch標(biāo)記來(lái)判斷是否需要重置

search.vue：（這個(gè)是需要緩存的頁(yè)面）

<script>
import {mapState, mapMutations} from 'vuex' //vuex提供的映射函數(shù)，用來(lái)簡(jiǎn)化代碼的
export default {
  activated() {
    if (this.refreshSearch) {
      // 若為true，則執(zhí)行重置頁(yè)面等相關(guān)操作
      this.fetchData();
    } else {
      this.reset(true);
    }
  },
  methods：{
    fetchData() {
      // 獲取頁(yè)面數(shù)據(jù)
    },
    ...mapMutations({
      reset: 'setRefreshSearch' // 將 `this.reset()` 映射為 `this.$store.commit('setRefreshSearch')`
    })
  },
  computed: {
    ...mapState([
      'refreshSearch' // 映射 this.refreshSearch 為 this.$store.state.refreshSearch
    ]),
  }
}
</script>

當(dāng)我們從搜索頁(yè)去詳情頁(yè)時(shí)，希望搜索頁(yè)緩存，只需要把標(biāo)記設(shè)為false：

methods: {
  goDetail() {
    this.reset(false) // 這樣返回搜索頁(yè)的時(shí)候，搜索頁(yè)就不會(huì)重置數(shù)據(jù)了
    this.$router.push({path: '/detail'})
  },
  ...mapMutations({
    reset: 'setRefreshSearch'
  })
}

當(dāng)我們從首頁(yè)去搜索頁(yè)時(shí)，希望搜索頁(yè)數(shù)據(jù)重置，只需把標(biāo)記設(shè)為true：

methods: {
  goSearch() {
    this.reset(true) // 這樣去搜索頁(yè)時(shí)數(shù)據(jù)就會(huì)被重置了
    this.$router.push({path: '/search'})
  },
  ...mapMutations({
    reset: 'setRefreshSearch'
  })
}

效果預(yù)覽

總結(jié)

本文介紹了按需使用keep-alive，以及借助vuex來(lái)控制keep-alive的組件頁(yè)面的數(shù)據(jù)是否需要重置刷新，希望對(duì)大家有幫助。

附送相關(guān)知識(shí)傳送門(mén)：

vue內(nèi)置組件keep-alive

vue-router滾動(dòng)行為

生命周期鉤子activated

vuex狀態(tài)管理庫(kù)

以上所述是小編給大家介紹的keep-alive + vuex 讓緩存的頁(yè)面靈活起來(lái)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論