快捷導(dǎo)航

詳解keep-alive + vuex 讓緩存的頁面靈活起來

更新時(shí)間：2019年04月19日 11:03:51 作者：HackerX

這篇文章主要介紹了keep-alive + vuex 讓緩存的頁面靈活起來，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

引入

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

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

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

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

方法一：

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

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

由于<keep-alive>組件不支持v-if指令，所以我們?cè)贏pp.vue中采用兩個(gè)<router-view>的寫法，通過當(dāng)前路由的keepAlive字段來判斷是否對(duì)頁面進(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īng)的name，例如在detail.vue中：

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

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

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

如果詳情頁也做了keep-alive，那么列表頁和詳情頁切換時(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)了列表頁的緩存。但這其實(shí)并不靈活，比如返回首頁再進(jìn)入這個(gè)搜索頁的時(shí)候，由于沒做任何處理，所以這個(gè)搜索頁它仍處于之前的狀態(tài)：

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

借助vuex使頁面更靈活

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

vuex搞起來

安裝

npm install vuex --save

配置vuex

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

state.js:

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

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è)用來判斷頁面是否需要重置的標(biāo)記了。

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

在哪里重置

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

在activated()中想重置就重置

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

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

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

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

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

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

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

效果預(yù)覽