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

更新时间：2025年04月25日 09:55:34 作者：organwalk

这篇文章主要介绍了Vue3缓存之路由缓存与Pinia状态缓存,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3缓存两种：路由缓存与Pinia状态缓存

单页应用中，最令人头疼的就是页面刷新或者回退时，数据丢失或重新加载的问题。

本文以微小demo介绍两种缓存以应付Vue3项目中的绝大多数需要缓存的业务。

路由缓存

一个令人头疼的问题是，当路由后退或原地刷新时，组件的生命周期会被重新触发，即可能导致生命周期钩子中加载数据的函数被触发，为了避免这种情况，可以利用Vue-Router的路由缓存机制。

以一个文章列表为例，假设你点击了一篇文章进行阅读，并希望返回时不要重载数据或触发生命周期钩子，你可以在router配置中，为文章列表页面的meta选项加上keepAlive属性，并设置为true：

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

然后找到router-view组件，并对其进行改写：

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

这样就完成了对文章列表页面的缓存。如果你需要为其他页面进行缓存，则可以按需为其路由配置keepAlive属性

Pinia状态缓存

一种场景是，我们有一行Type标签，点击其可以加载不同分类下的文章列表，而这个Type会被我们纳入状态管理。

一个尴尬的事实是，当页面刷新或者路由回退时，Type也随之被重置，丢失了原来的状态。为此，可以使用Pinia的额外插件，实现其缓存：

npm i pinia-plugin-persist --save

安装完成后，在main.js文件中，进行如下配置：

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中进行配置，假设针对Type进行状态管理并缓存，可以配置其persist选项下的enabled属性为true：

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

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

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

这样就完成了对NowType的缓存。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue .sync修饰符的使用详解
这篇文章主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
vue3.0 加载json的方法（非ajax）
这篇文章主要介绍了vue3.0 加载json的方法（非ajax），帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-10-10
详解vue2.6插槽更新v-slot用法总结
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
Vue 进阶教程之v-model详解
这篇文章主要介绍了Vue 进阶教程之v-model详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
vue封装Animate.css动画库的使用方式
这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue3中$attrs的变化与inheritAttrs的使用详解
$attrs现在包括class和style属性。也就是说在vue3中$listeners不存在了，vue2中$listeners是单独存在的，在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性，这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下
2022-10-10
Vue3项目兼容低版本浏览器的全面指南
随着 JavaScript 语言的快速演进,许多现代特性在低版本浏览器中无法运行,本文将详细介绍如何使Vue3和TypeScript让项目完美兼容 IE11等低版本浏览器,有需要的小伙伴可以参考一下
2025-04-04
Vite+Vue3的组件自动注册功能解读
这篇文章主要介绍了Vite+Vue3的组件自动注册功能使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2026-03-03
vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决
这篇文章主要介绍了vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
如何取消Vue Watch监听的方法示例
在实际项目中,watch 本质上是一种长期订阅关系,如果不加控制,它会在数据变化的整个生命周期内持续触发,这在很多场景下并不是我们想要的,所以我们有时会想取消Vue Watch监听,因此本文给大家介绍了取消Vue Watch监听的方法示例,需要的朋友可以参考下
2026-01-01