keep-alive + vuex + mint + Infinite scroll 保存分頁列表數據

場景描述

在使用mintUI loadmore的時候,假如上拉加載到第三頁,查看詳情而後後退到列表頁,列表組件重置。可是,有的狀況是須要組件重置的,好比你在另外一個組件添加了一條記錄,那麼再進入這個組件的時候就須要重置組件數據。html

使用 keep-alive

<keep-alive>包裹動態組件時,會緩存不活動的組件實例,而不是銷燬它們。和 <transition> 類似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出如今父組件鏈中。vue文檔地址vue

第一步

router裏添加meta 設置哪一個組件內數據須要被緩存vuex

{
    path: '/exam/record',name: 'examRecord',component: examRecord,
    meta:{
    	title:'考試記錄',
    	keepAlive:true //是否須要緩存
    }
},
{
    path: '/exam/type',name: 'examType',component: examType,
    meta:{
	title:'選擇考試類目'
    }
},
複製代碼
第二步

app.vue里加入api

<keep-alive>
   <router-view  v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製代碼
第三步

引入vuex 添加一個變量,引入步驟,可查看文檔 vuex緩存

import {mapState , mapMutations} from 'vuex';

state:{
	refreshSearch:true, //是否重置列表(考試記錄)
},
mutations:{
    //修改refreshSearch的值
	setRefreshSearch(state,flag){
	    state.refreshSearch = flag;
	}
}
複製代碼
第四步

/exam/record組件裏操做,當組件在 <keep-alive> 內被切換,它的 activateddeactivated 這兩個生命週期鉤子函數將會被對應執行。因此咱們組件初始化在activated週期裏操做bash

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改成trueapp

beforeRouteLeave(to, from, next) {
    this.loading = true;
    next();
},
複製代碼
第五步

重置refreshSearch值,我是寫在首頁了,若是回到首頁,refreshSearch值爲true,則下次進入到列表組件的時候,數據重置。函數

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


複製代碼
相關文章
相關標籤/搜索