Vue3緩存之路由緩存與Pinia狀態(tài)緩存詳解

更新時(shí)間：2025年04月25日 09:55:34 作者：organwalk

這篇文章主要介紹了Vue3緩存之路由緩存與Pinia狀態(tài)緩存,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue3緩存兩種：路由緩存與Pinia狀態(tài)緩存

單頁應(yīng)用中，最令人頭疼的就是頁面刷新或者回退時(shí)，數(shù)據(jù)丟失或重新加載的問題。

本文以微小demo介紹兩種緩存以應(yīng)付Vue3項(xiàng)目中的絕大多數(shù)需要緩存的業(yè)務(wù)。

路由緩存

一個(gè)令人頭疼的問題是，當(dāng)路由后退或原地刷新時(shí)，組件的生命周期會(huì)被重新觸發(fā)，即可能導(dǎo)致生命周期鉤子中加載數(shù)據(jù)的函數(shù)被觸發(fā)，為了避免這種情況，可以利用Vue-Router的路由緩存機(jī)制。

以一個(gè)文章列表為例，假設(shè)你點(diǎn)擊了一篇文章進(jìn)行閱讀，并希望返回時(shí)不要重載數(shù)據(jù)或觸發(fā)生命周期鉤子，你可以在router配置中，為文章列表頁面的meta選項(xiàng)加上keepAlive屬性，并設(shè)置為true：

{
        path : '/articleList',
        name : 'articleList',
        component: ()=>import('@/view/article/ArticleListView.vue'),
        meta: { keepAlive:true } // 此處添加
}

然后找到router-view組件，并對(duì)其進(jìn)行改寫：

 <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view>

這樣就完成了對(duì)文章列表頁面的緩存。如果你需要為其他頁面進(jìn)行緩存，則可以按需為其路由配置keepAlive屬性

Pinia狀態(tài)緩存

一種場景是，我們有一行Type標(biāo)簽，點(diǎn)擊其可以加載不同分類下的文章列表，而這個(gè)Type會(huì)被我們納入狀態(tài)管理。

一個(gè)尷尬的事實(shí)是，當(dāng)頁面刷新或者路由回退時(shí)，Type也隨之被重置，丟失了原來的狀態(tài)。為此，可以使用Pinia的額外插件，實(shí)現(xiàn)其緩存：

npm i pinia-plugin-persist --save

安裝完成后，在main.js文件中，進(jìn)行如下配置：

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist' // 注意此處

const pinia = createPinia()
pinia.use(piniaPluginPersist)  // 注意此處

const app = createApp(App)
app.use(pinia)

然后回到我們的store.js中進(jìn)行配置，假設(shè)針對(duì)Type進(jìn)行狀態(tài)管理并緩存，可以配置其persist選項(xiàng)下的enabled屬性為true：

export const useNowTypeStore = defineStore('nowType', () => {
        const nowType = ref(0)

        function setNowType(realType) {
            nowType.value = realType
        }

        return {nowType, setNowType}
    }, {
        persist: {
            enabled: true
        }
    } // 注意此處
)

這樣就完成了對(duì)NowType的緩存。