场景描述

在使用mintUI loadmore的时候，假如上拉加载到第三页，查看详情然后后退到列表页，列表组件重置。但是，有的情况是需要组件重置的，比如你在另一个组件添加了一条记录，那么再进入这个组件的时候就需要重置组件数据。

使用 keep-alive

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

第一步

在router里添加meta 设置哪个组件内数据需要被缓存

{    path: '/exam/record',name: 'examRecord',component: examRecord,    meta:{    	title:'考试记录',    	keepAlive:true //是否需要缓存    }},{    path: '/exam/type',name: 'examType',component: examType,    meta:{	title:'选择考试类目'    }},复制代码

第二步

在app.vue里加入

       
     
    
    复制代码

第三步

引入vuex 添加一个变量，引入步骤，可查看文档

import {mapState , mapMutations} from 'vuex';state:{	refreshSearch:true, //是否重置列表(考试记录)},mutations:{    //修改refreshSearch的值	setRefreshSearch(state,flag){	    state.refreshSearch = flag;	}}复制代码

第四步

在/exam/record组件里操作，当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。所以我们组件初始化在activated周期里操作

activated(){    this.loading = false;//允许上拉刷新    //如果refreshSearch的值为true，则重置列表数据    if(this.refreshSearch){        this.page = 1;        this.getList();    }},methods：{    ...mapMutations(['setRefreshSearch'])},computed:{    ...mapState(['refreshSearch'])}goDetails(id){	this.setRefreshSearch(false); //进入详情时 改变refreshSearch的值 使列表组件数据缓存	this.$router.push({path:'/exam/handIn',query:{id:id}});},复制代码

我使用mintUI的时候出现了个问题，就是在进入详情页的时候列表页一直在接口，不知道是不是<keep-alive>把列表页只是做了隐藏状态，这个我没弄懂。 所以我在离开页面的时候加了操作，离开页面的时候把loading改为true

beforeRouteLeave(to, from, next) {    this.loading = true;    next();},复制代码

第五步

重置refreshSearch值，我是写在首页了，如果回到首页，refreshSearch值为true，则下次进入到列表组件的时候，数据重置。

import {mapState , mapMutations} from 'vuex';methods:{    ...mapMutations(['setRefreshSearch'])},mounted(){	this.setRefreshSearch(true);},复制代码