Vue3中KeepAlive的使用

??我們在開發一個功能是，經常會遇到從一個串列頁面，點擊串列項跳轉到詳情頁面的需求，理想的情況下，從詳情頁面回傳到串列頁，應該回到跳轉前的狀態，可以繼續瀏覽其他內容；但是在沒做任何處理的情況下，回傳串列頁后，串列頁會被重繪，回到初始的狀態，這就與我們的預設不符；為了實作這樣的需求，我們需要使用keep-alive組件來快取串列頁面的狀態，讓其不被重繪，這樣就可以愉快的繼續瀏覽啦，

??下面就是我們使用keep-alive組件的一些步驟：（ps：專案使用vue3、vue-router、pinia、typescript）

1、宣告路由的Meta擴展資料型別，用來在路由中配置哪些頁面需要被快取

router.d.ts

import "vue-router";

declare module "vue-router" {

  interface RouteMeta extends MyRoute.RouteMeta {
    title: string;
    keepAlive?: boolean; // 該路由頁面是否需要快取
    keepAlivePages?: Array<string>;  // 配置需要快取的跳回來源（從某頁面回到該頁面，該頁面快取，其他頁面回到該頁面，該頁面不快取）
    canBack?: boolean; // 是否可以回傳
  }

}

2、配置路由資訊，以文章串列和詳情頁面為例

分模塊配置路由檔案library.ts

import { RouteComponent, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
 {
    path: "library/list",
    name: "libraryList",
    meta: { title: "文章串列", keepAlive: true, keepAlivePages: ["libraryDetail"] },
    component: (): RouteComponent => {
      return import(/* webpackChunkName: "pages_knowledge_library" */ "@/views/pages/knowledge/library/index.vue");
    }
  },
  {
    path: "library/detail",
    name: "libraryDetail",
    meta: { title: "文章詳情", canBack: true },
    component: (): RouteComponent => {
      return import(/* webpackChunkName: "pages_knowledge_library_detail" */ "@/views/pages/knowledge/library/detail.vue");
    }
  }
];

export default routes;

3、宣告頁面組件的名稱，與配置的名稱一致：keep-alive 組件會根據組件的 name 選項進行匹配，所以組件如果想要條件性地被 keep-alive 快取，就必須顯式宣告一個 name 選項，

在 3.2.34 或以上的版本中，使用 <script setup> 的單檔案組件會自動根據檔案名生成對應的 name 選項，即使是在配合 <KeepAlive> 使用時也無需再手動宣告，

但在專案中我們是分模版開發，業務組件檔案重名的幾率還是挺大的，所以我們還是需要顯式宣告組件的name屬性，

library/index.vue

<template>
<!-- 頁面模版 -->
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({ name: "libraryList" });
</script>

<script lang="ts" setup>
// 頁面系結資料
<script>

library/detail.vue

<template>
<!-- 頁面模版 -->
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({ name: "libraryDetail" });
</script>

<script lang="ts" setup>
// 頁面系結資料
<script>

3、定義一個Store用來快取需要被快取的頁面集合

keepAliveStore.ts

import { defineStore } from "pinia";

export interface KeepAliveState {
  keepAliveComponents: Array<any>;
}

export const keepAliveStore = defineStore("keepAlive", {
    
  state: (): KeepAliveState => {
    return {
      keepAliveComponents: []
    };
  },

  getters: {
    getKeepAliveComponents(state) {
      return state.keepAliveComponents;
    }
  },

  actions: {
      
    // 加入到快取佇列
    setKeepAlive(component: any) {
      if (!this.keepAliveComponents.includes(component)) {
        this.keepAliveComponents.push(component);
      }
    },

    // 從快取佇列移除
    removeKeepAlive(component: any) {
      const index = this.keepAliveComponents.indexOf(component);
      if (index !== -1) {
        this.keepAliveComponents.splice(index, 1);
      }
    }

  }
});

4、路由守衛處理：在路由進入之前讀取Meta擴展資料，如果配置了快取，就加入到快取佇列中；在路由離開之前判斷目標路由的Meta擴展資料，如果該頁面與配置的來源頁面不匹配，則將目標路由從快取佇列中移除

router/index.ts

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
});

// --- beforeRouter --- //
router.beforeEach((to, _from, next) => {

  const { KeepAliveStore } = usePiniaStore();
  const meta = to.meta || {};

  // 加入快取佇列
  if (meta.keepAlive) {
    KeepAliveStore.setKeepAlive(to.name);
  }  

  // 做一些其他的事情
});

// ---afterRouter --- //
router.afterEach((to, from) => {

  const { KeepAliveStore } = usePiniaStore();

  // 如果配置了目標快取，即：目標頁面不在目標快取中，移除當前頁面快取
  if (from.meta.keepAlivePages) {
    if (from.meta.keepAlivePages.indexOf(to.name as string) == -1) {
      KeepAliveStore.removeKeepAlive(from.name);
    }
  }

  // 做一些其他的事情
});

5、keep-alive組件的使用：取出快取佇列中的集合，配置給include屬性，keep-alive組件便能把配置的路由頁面給快取起來了；同時也可以設定max最大快取數，避免快取太多導致性能下降

RouterView.vue

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in" appear>
      <keep-alive :include="keepAliveComponents" :max="10">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
import { usePiniaStore } from "@/store";
    
const { KeepAliveStore } = usePiniaStore();
const keepAliveComponents = KeepAliveStore.getKeepAliveComponents;
</script>

標籤：其他

上一篇：前端設計模式——備忘錄模式

下一篇：ES6_day01