Vue3缓存之路由缓存与Pinia状态缓存详解
作者：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的缓存。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。