vue的keep-alive组件使用详解（亲测可用）

2020-05-20 18:08:51 阅读：281 来源： 互联网

标签：vue alive keep 缓存 setKeepAlive keepAlive store 页面

文章开头，先说一下我遇到的问题，如果不是类似业务逻辑，那么可能会遇到方法不可用的效果，淡定~~~

我的问题是：当前有3个页面，首页（简称A）、列表页面（简称B）、详情页面（简称C），从A->B，B->C，C->B，这时，希望B页面状态为进入C页面时的状态，B->A，A->B，这时希望B页面是页面初始状态，但是我之前用

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

这种方法，只能实现B->C->B时页面被缓存，B->A->B之后不是初始状态

下面，看方法！

运用vue的include和exclude方法

App.vue中这样写

<div id="app">
    <keep-alive :include="keepAlive">
        <router-view class="router-view"></router-view>
    </keep-alive>
</div>

然后在A->B页面时，设置一个全局的数组

this.$store.commit('setKeepAlive', ['B'])//在A->B页面的方法中加上这段代码

B.vue中需要用两个生命周期函数来做逻辑处理 beforeRouteEnter和beforeRouteLeave

beforeRouteEnter (to, from, next) {
    next(vm => {
　　　　　//判断是否从C页面进入，如果是，那么仍需将B页面缓存
        if (from.name === 'C') {
            vm.$store.commit('setKeepAlive', ['B'])
        }
    })
},
beforeRouteLeave (to, from, next) {
　　//判断将要去的页面是否为C，若是，则需要将B页面缓存
    if (to.name === 'C') {
        this.$store.commit('setKeepAlive', ['vehicleManage'])
    }else {
　　//否则将缓存队列清空，（这里清空缓存队列依据情况而定，我只需要缓存这一个页面，所以做了清空，如果不知道不用清空应该怎么做的情况下，可以在store中多设置几个缓存队列的全局数组）
        this.$store.commit('setKeepAlive', [])
    }
    next()
},

store.js中需要给全局store对象加上这个属性

const state = {
    keepAlive: [''],
}

//mutations属性中加上set来修改这个属性
setKeepAlive (state, keepAlive) {
    state.keepAlive = keepAlive
} 

//然后在getters中来获取这个属性

getters: {
    keepAlive: state => {
        return state.keepAlive
    },
}

最终，在App.vue中监听该属性变化，并且动态传给keep-alive的include属性

computed: {
　　　//将监听到的keepAlive属性，动态穿给keep-alive组件（文章开头的App.vue代码）
     keepAlive () {
          return this.$store.getters.keepAlive
     }
},

以上，就是我碰到这个问题之后，所用的方法

在此有一点点想要吐槽的地方，我在没有找到这个办法的时候用了文章最开头那种方法，通过 v-if 来判断缓存组件是否显示，但是我发现这个方法的使用场景不仅单一，而且不能支持更深的逻辑，但是发现好多人都在用这种方法，而且都是亲自测过可以使用，我不太明白是我没有用对，还是他们的自测不够深入，谨代表我的少许疑问，有怪莫怪！！！

标签：vue,alive,keep,缓存,setKeepAlive,keepAlive,store,页面
来源： https://www.cnblogs.com/qiemh/p/12925086.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的keep-alive组件使用详解（亲测可用）