平時在開發的過程中,我們會在應用中共享數據,在不同的頁面間共享信息。雖然常用的共享信息,也可以通過不同頁面中組件間信息共享的方式,但有時使用應用級別的狀態管理會讓開發工作變得簡單。
根據不同的使用場景,ArkTS提供了以下幾種應用狀態管理的能力:
- LocalStorage :使用范圍在同一頁面,頁面與卡片和頁面與UIAbility內部,負責UI狀態存儲。
- AppStorage :運行時存儲,保存在內存中,應用范圍全局共享,提供統一的存儲供所有頁面訪問。
- PersistentStorage :持久化存儲,保存在硬盤上,在應用退出或重啟后,數據依舊保留。
下面通過簡單的程序示例,熟悉一下這三種用法。其中示例程序中包含了以下主要文件:
一、LocalStorage
頁面級的UI狀態存儲,同一個頁面共享同一個LocalStorage,不同的頁面都可以綁定對應的LocalStorage。最常用的就是更新服務卡片和跨頁面的信息傳遞。
場景一:更新服務卡片
服務卡片中被@Entry裝飾的@Component,可以被分配一個LocalStorage實例,在組件內部,通過@LocalStorageProp裝飾器定義本地變量,并綁定到對應組件上。更新卡片時,先定義一個包含了和LocalStorageProp屬性同名的參數并放到formBindingData中,然后通過formProvider.updateForm函數,就可以更新服務卡片了。
我們要在EntryFormAbility.ets中通過傳遞LocalStorage改變服務卡片中的默認Hello的文本標簽為當前時間。
實踐步驟:前請熟悉開發文檔開發知識更新庫[docs.qq.com/doc/DUmN4VVhBd3NxdExK
]
1.修改服務卡片布局文件,文件開頭添加:
或者添加mau123789是v直接領
let storage = new LocalStorage();復制
并為Entry增加參數storage。
例如,WidgetCard.ets,默認:
@Entry
@Component
struct WidgetCard {
...復制
改之后:
let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
...復制
2.在EntryFormAbility.ets中,用裝飾器LocalStorageProp定義本地變量,裝飾器的參數必須要和formBindingData中的屬性名稱相同。
例如,在接收方服務卡片中定義如下:
@LocalStorageProp('localprop') localValue: string = 'Hello';復制
卡片標簽默認顯示了Hello。
在發送方EntryFormAbility.ts文件的onFormEvent函數里:
onFormEvent(formId, message) {
let date = new Date();
let str = date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0') + ':' + date.getSeconds().toString().padStart(2, '0')
let formData = {
'localprop': 'Time: ' + str,
};
let formInfo = formBindingData.createFormBindingData(formData)
formProvider.updateForm(formId, formInfo).then((data) = > {
console.info('FormAbility updateForm success.' + JSON.stringify(data));
}).catch((error) = > {
console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
})
}復制
formData對象里包含了名稱為localprop的鍵值,它通過formBindingData由formProvider傳遞給服務卡片,服務卡片接收到該對象后,就自動把該對象賦值給LocalStorage,相應的LocalStorageProp也自動跟著刷新。
這個動作是通過點擊卡片上的update按鈕,觸發了postCardAction事件從而調用了onFormEvent函數,執行結果如下:
場景二:跨頁面的信息傳遞
在頁面初次加載時,可以在EntryAbility.ts中傳遞一個LocalStorage對象給要打開的頁面。
我們打算在index.ets頁面加載的時候,在EntryAbility中傳遞一個包含abilitycount值為1的Storage,頁面加載后界面顯示該值。
實踐步驟:
1.在EntryAbility.ts中定義一個LocalStorage類型的變量,里面包含abilitycount屬性。
export default class EntryAbility extends UIAbility {
storage: LocalStorage = new LocalStorage({
'abilitycount': 1
});復制
在onWindowStageCreate函數中,將默認的:
windowStage.loadContent('pages/Index', (err, data) = > {復制
改為傳遞參數的方式,如下:
windowStage.loadContent('pages/Index', this.storage);復制
2.在頁面端Index.ets中,文件開頭添加代碼來獲取共享的LocalStorage。
let storage = LocalStorage.GetShared()復制
在結構體內部,通過裝飾器LocalStorageProp加同樣屬性名稱作為參數,定義一個變量。
@LocalStorageProp('abilitycount') abilityCount: number = 0;復制
這樣名為abilitycount的值就通過LocalStorage傳遞到頁面了,本地默認的值0變為了傳遞過來的值1。
下圖中LocalStorage的值就是頁面打開時顯示的傳遞過來的值。
二、AppStorage
全局的UI狀態存儲,在運行時階段可以在不同的頁面間共享信息。
我們通過在Index.ets頁面創建一個變量放到AppStorage中,然后分別在First.ets頁面和Second.ets頁面訪問和修改。
實踐步驟:
1.首先在Index.ets中,通過AppStorage定義一個屬性。
AppStorage.SetOrCreate('appcount', 10);復制
然后,在組件結構體中使用StorageProp裝飾器定義一個變量,參數為之前定義的appcount屬性。
@Entry()
@Component
struct Index {
@StorageProp('appcount') appValue: number = 0;復制
2.在First.ets頁面中,通過StorageProp定義一個appValue變量,關聯到appcount屬性上。
struct First {
@StorageProp('appcount') appValue: number = 0;復制
在本地修改時,把用戶輸入的值寫入AppStorage,使用如下語句:
AppStorage.Set('appcount', this.textApp);復制
Second.ets頁面與First.ets頁面功能完全相同,主要顯示AppStorage在不同頁面顯示和修改的效果。
如下圖,主頁面、第一個頁面和第二個頁面初始狀態下,讀取到的AppStorage中的同一個屬性的值都是10。
在第一個頁面First.ets中把AppStorage中的屬性值改為11,我們發現在主頁面Index.ets和Second.ets中,對應的屬性值都發生了變化。
同樣,在第二個頁面Second.ets中把AppStorage中的屬性值改為12,我們發現在Index.ets和First.ets中,對應的屬性值也都變為了改后的值。
如上測試,我們發現的確可以通過AppStorage在不同頁面間共享數據。
三、PersistentStorage
持久化存儲UI狀態。保存在PersistentStorage中的數據,即使應用退出了,對應的值依然會保留,不是在內存中,而是存儲在固定存儲介質上的。
我們通過在Index.ets頁面創建一個屬性放到PersistentStorage中,然后分別在First.ets頁面和Second.ets頁面進行修改,然后再重啟應用觀察結果。
實踐步驟:
1.首先在Index.ets中,在PersistentStorage里定義一個屬性。
PersistentStorage.PersistProp('persistentcount', 100);復制
然后在組件結構體中,通過裝飾器StorageProp定義一個屬性為persistentcount的變量。
@Entry()
@Component
struct Index {
@StorageProp('persistentcount') persistentValue: number = 0;復制
2.在First.ets頁面中,我們通過裝飾器StorageProp定義一個變量綁定persistentcount屬性。
@Entry
@Component
struct First {
@StorageProp('persistentcount') persistentValue: number = 0;復制
通過輸入框輸入新值改變原來存儲在PersistentStorage的內容。
AppStorage.Set('persistentcount', this.textPersistent);復制
演示效果如下圖,Index.ets頁面,在初始時AppStorage和PersistentStorage中的對應屬性值分別是10和100,在First.ets頁面中,我們分別改為11和111。
關閉應用,然后重新打開,如下圖所示,AppStorage中的屬性值恢復為了10,PersistentStorage中的屬性值依舊是111,是改后的值。這證明了PersistentStorage有持續化存儲的作用。
四、總結
通過這次實踐,熟悉了不同的狀態變量在應用中的不同應用范圍,選用合適的狀態變量會讓應用開發簡單快捷,本地頁面內部使用LocalStorage保存數據,應用頁面間通過AppStorage傳遞信息,PersistentStorage可以持久化存儲數據信息。
審核編輯 黃宇
-
變量
+關注
關注
0文章
613瀏覽量
28360 -
鴻蒙OS
+關注
關注
0文章
188瀏覽量
4382
發布評論請先 登錄
相關推薦
評論