keep-alive + vuex + mint + Infinite scroll 儲存分頁列表資料

化身孤島的鯨_發表於2019-04-18
Keep-AliveVue

場景描述

在使用mintUI loadmore的時候，假如上拉載入到第三頁，檢視詳情然後後退到列表頁，列表元件重置。但是，有的情況是需要元件重置的，比如你在另一個元件新增了一條記錄，那麼再進入這個元件的時候就需要重置元件資料。

使用 keep-alive

<keep-alive>包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和 <transition> 相似，<keep-alive> 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在父元件鏈中。vue文件地址

第一步

在router裡新增meta 設定哪個元件內資料需要被快取

{
    path: '/exam/record',name: 'examRecord',component: examRecord,
    meta:{
    	title:'考試記錄',
    	keepAlive:true //是否需要快取
    }
},
{
    path: '/exam/type',name: 'examType',component: examType,
    meta:{
	title:'選擇考試類目'
    }
},
複製程式碼
第二步

在app.vue里加入

<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> 內被切換，它的 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);
},


複製程式碼

相關文章