Vue3缓存之路由缓存与Pinia状态缓存详解

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

 <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>

npm i pinia-plugin-persist --save

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

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

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

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

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

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