vue中keep-alive的include属性允许组件有条件地缓存

最新推荐文章于 2024-05-16 10:35:31 发布

一加一不是二

最新推荐文章于 2024-05-16 10:35:31 发布

阅读量1.2k

点赞数

文章标签： vue.js 缓存 javascript

本文链接：https://blog.youkuaiyun.com/GardJasmin/article/details/123074105

版权

本文介绍了如何在Vue.js应用中使用`<keep-alive>`组件结合Vuex实现页面切换时的数据缓存。当首次切换tabs时，页面会刷新加载，之后的切换则从缓存中获取数据。D页面包含一个刷新按钮，点击可以清除所有页面缓存，重新进行页面刷新。通过`afterRouterChange`方法记录子组件名，并用`spliceArray`和`pushArray` mutation 更新缓存列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A，B，C，D四个页面，底部有tabs切换，首次点击切换时刷新页面，再次点击切换时取缓存中的页面数据，D页面有按钮，点击清除缓存，重新进行页面刷新以及页面缓存

tabs组件

<transition @after-enter="afterRouterChange">
   <keep-alive :include="keepAliveArr">
       <router-view ref="child"></router-view>
   </keep-alive>
</transition>
data(){
return{
}}
computed: {
    keepAliveArr() {
        return this.$store.state.keepAliveArr;
    },
},
methods:{
afterRouterChange() {
        // 记录子组件name，用于keepalive
        let childName = this.$refs.child.$options.name;
        this.$store.commit("pushArray", childName);
    },
}

D页面刷新按钮

refreshData() {
    this.$store.commit("spliceArray", []);
},

vuex文件

state: {
    keepAliveArr: [],
}
mutations: {
    spliceArray(state, name) {
        state.keepAliveArr = name
    },
    pushArray(state, childName) {
        if (!state.keepAliveArr.includes(childName)) {
            state.keepAliveArr.push(childName);
        }
    },
}