vue頁面緩存

一.頁面緩存介紹

頁面緩存對於用戶來說，是一個比較常用的需求；

1.項目打開在tab的頁面有時需要緩存，例如，用戶打開了一個頁面，停留在該頁面的某一步驟或操作，用戶沒有關閉此頁面的情況下，又打開了另一個頁面查看數據，然后用戶想切換到剛才那個打開的頁面繼續操作，此時，那個頁面不應該刷新，而是緩存下來，只有當用戶關閉了頁面，重新打開時，頁面才會刷新；

2.項目打開在tab的頁面有時候不需要緩存，例如，用戶打開一個頁面，看完數據之后，沒有關閉此頁面的情況下，又打開了一個頁面操作數據，操作完之后，又切回到前一個頁面來查看最新的數據，此時則要重新刷新頁面，不能緩存頁面；

可以參考github項目：https://github.com/Little-Orange7/cmms-vue

該項目設計就結合了上述兩種情況，就頁面打開時是否緩存，可以由用戶定制化，由用戶自由設置。

二.具體實現

1.使用keep-alive來實現：

<keep-alive :include="keepAlive">
  <router-view></router-view>
</keep-alive>

include中包含的頁面的name則會被緩存下來，注意：此name是指的是頁面屬性的name,而不是路由對象中的name屬性，所以頁面的name屬性一定要寫，並且名稱要和菜單頁面的一致，因為設計時讀取的name是存放在數據庫中的，根據菜單url的組件名稱來截取的。

2.使用vuex

使用vuex來緩存對應的include組件名稱，根據此緩存來動態調整緩存頁面；

[SET_KEEPALIVE] (state, compNames) {
  state.keepAliveComps = compNames
}

3.監聽

在tab中監聽打開的tab對象，打開和關閉時，根據是否需要緩存的標志，來動態的調整緩存的狀態數據：

watch: {
  // 監聽打開的tabs，來動態跳轉緩存頁面
  tabsList (newVal, oldVal) {
    let vals = newVal
    this.mediList = []// 每次都要重置為空
    vals.forEach(val => {
      if (val.keepAlive) { // 打開的tab且設置為緩存頁的才會緩存
        this.mediList.push(val.name)// 放入打開的tab的name
      }
    })
    this.$store.commit('SET_KEEPALIVE', this.mediList)
  }
}

以上就是keepAlive緩存知識，有疑問的可以下方留言哦！