Keep-Alive中通過component多次加載同樣的動態(tài)組件無法保持狀態(tài)的解決辦法

問題描述

項目功能上有需要動態(tài)添加組件的需求,比如tab標簽功能,動態(tài)添加標簽,同時添加后的標簽在切換時需要保存狀態(tài),自然而然想到了keepalive,這就有了下面的代碼:

一、tabPage 定義方式1:

通過components事先定義好所有會加載的組件:


tagPage
通過ref或computed的方式判斷當前的標簽的類型并返回:


這個時候
keep
alive是工作的,但這里的問題是:

動態(tài)創(chuàng)建的組件有多個是同一個組件,比如APIAdd,

由于keep?alive的緩存機制是通過組件名稱來緩存的,同一個組件被打開多次的話其實顯示的還是第一次打開的那個,這和我們實際的應用場景不符合,不能緩存界面狀態(tài)(比如表單中輸入的內容)

二、tabPage 定義方式2

為了解決方式1中的同名組件只能加載一次的問題,需要同一個組件被加載多次,只是里面展示的內容不一樣,所以tabPage通過defineAsyncComponent異步加載:


這里組件能加載成功,同名組件每次創(chuàng)建標簽都會生成一個新的,但是這里的問題是:

沒有起到keepalive的效果,已經加載的組件,在切換時又重新創(chuàng)建了組件,?狀態(tài)自然也沒有得到保存,

解決辦法:

為了解決同一個組件可以被動態(tài)加載多次,同時需要能keepalive,解決的辦法就是不用component,而是把所有動態(tài)添加的組件都各自放在一個keepalive中,根據條件切換顯示即可:


這樣每個組件都可以加載自己的數據,并且可以
keep
?alive保存狀態(tài):