【開發(fā)者說(shuō)】HarmonyOS實(shí)踐之應(yīng)用狀態(tài)變量共享

# 開發(fā)者說(shuō) #

【開發(fā)者說(shuō)】欄目是為HarmonyOS開發(fā)者提供的展示和分享平臺(tái)，在這里，大家可以發(fā)表自己的技術(shù)洞察和見解，也可以展示自己的開發(fā)心得和成果。

歡迎大家積極投稿，后臺(tái)回復(fù)【投稿】，即可獲得投稿渠道。期待你們的分享~

平時(shí)在開發(fā)的過(guò)程中，我們會(huì)在應(yīng)用中共享數(shù)據(jù)，在不同的頁(yè)面間共享信息。雖然常用的共享信息，也可以通過(guò)不同頁(yè)面中組件間信息共享的方式，但有時(shí)使用應(yīng)用級(jí)別的狀態(tài)管理會(huì)讓開發(fā)工作變得簡(jiǎn)單。

根據(jù)不同的使用場(chǎng)景，ArkTS提供了以下幾種應(yīng)用狀態(tài)管理的能力：

• LocalStorage：使用范圍在同一頁(yè)面，頁(yè)面與卡片和頁(yè)面與UIAbility內(nèi)部，負(fù)責(zé)UI狀態(tài)存儲(chǔ)。

• AppStorage：運(yùn)行時(shí)存儲(chǔ)，保存在內(nèi)存中，應(yīng)用范圍全局共享，提供統(tǒng)一的存儲(chǔ)供所有頁(yè)面訪問(wèn)。

• PersistentStorage：持久化存儲(chǔ)，保存在硬盤上，在應(yīng)用退出或重啟后，數(shù)據(jù)依舊保留。

下面通過(guò)簡(jiǎn)單的程序示例，熟悉一下這三種用法。其中示例程序中包含了以下主要文件：

一

LocalStorage

頁(yè)面級(jí)的UI狀態(tài)存儲(chǔ)，同一個(gè)頁(yè)面共享同一個(gè)LocalStorage，不同的頁(yè)面都可以綁定對(duì)應(yīng)的LocalStorage。最常用的就是更新服務(wù)卡片和跨頁(yè)面的信息傳遞。

場(chǎng)景一：更新服務(wù)卡片

服務(wù)卡片中被@Entry裝飾的@Component，可以被分配一個(gè)LocalStorage實(shí)例，在組件內(nèi)部，通過(guò)@LocalStorageProp裝飾器定義本地變量，并綁定到對(duì)應(yīng)組件上。更新卡片時(shí)，先定義一個(gè)包含了和LocalStorageProp屬性同名的參數(shù)并放到formBindingData中，然后通過(guò)formProvider.updateForm函數(shù)，就可以更新服務(wù)卡片了。

我們要在EntryFormAbility.ets中通過(guò)傳遞LocalStorage改變服務(wù)卡片中的默認(rèn)Hello的文本標(biāo)簽為當(dāng)前時(shí)間。

實(shí)踐步驟：

1.修改服務(wù)卡片布局文件，文件開頭添加:

let storage = new LocalStorage();

并為Entry增加參數(shù)storage。

例如，WidgetCard.ets，默認(rèn)：

@Entry
@Component
struct WidgetCard {
...

改之后：

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
...

2.在EntryFormAbility.ets中，用裝飾器LocalStorageProp定義本地變量，裝飾器的參數(shù)必須要和formBindingData中的屬性名稱相同。

例如，在接收方服務(wù)卡片中定義如下：

@LocalStorageProp('localprop') localValue: string = 'Hello';

（左右滑動(dòng)查看更多）

卡片標(biāo)簽?zāi)J(rèn)顯示了Hello。

在發(fā)送方EntryFormAbility.ts文件的onFormEvent函數(shù)里：

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));
  })
}

（左右滑動(dòng)查看更多）

formData對(duì)象里包含了名稱為localprop的鍵值，它通過(guò)formBindingData由formProvider傳遞給服務(wù)卡片，服務(wù)卡片接收到該對(duì)象后，就自動(dòng)把該對(duì)象賦值給LocalStorage，相應(yīng)的LocalStorageProp也自動(dòng)跟著刷新。

這個(gè)動(dòng)作是通過(guò)點(diǎn)擊卡片上的update按鈕，觸發(fā)了postCardAction事件從而調(diào)用了onFormEvent函數(shù)，執(zhí)行結(jié)果如下：

場(chǎng)景二：跨頁(yè)面的信息傳遞

在頁(yè)面初次加載時(shí)，可以在EntryAbility.ts中傳遞一個(gè)LocalStorage對(duì)象給要打開的頁(yè)面。

我們打算在index.ets頁(yè)面加載的時(shí)候，在EntryAbility中傳遞一個(gè)包含abilitycount值為1的Storage，頁(yè)面加載后界面顯示該值。

實(shí)踐步驟：

1.在EntryAbility.ts中定義一個(gè)LocalStorage類型的變量，里面包含abilitycount屬性。

export default class EntryAbility extends UIAbility {
  storage: LocalStorage = new LocalStorage({
    'abilitycount': 1
});

（左右滑動(dòng)查看更多）

在onWindowStageCreate函數(shù)中，將默認(rèn)的：

windowStage.loadContent('pages/Index', (err, data) => {

（左右滑動(dòng)查看更多）

改為傳遞參數(shù)的方式，如下：

windowStage.loadContent('pages/Index', this.storage);

（左右滑動(dòng)查看更多）

2.在頁(yè)面端Index.ets中，文件開頭添加代碼來(lái)獲取共享的LocalStorage。

let storage = LocalStorage.GetShared()

（左右滑動(dòng)查看更多）

在結(jié)構(gòu)體內(nèi)部，通過(guò)裝飾器LocalStorageProp加同樣屬性名稱作為參數(shù)，定義一個(gè)變量。

@LocalStorageProp('abilitycount') abilityCount: number = 0;

（左右滑動(dòng)查看更多）

這樣名為abilitycount的值就通過(guò)LocalStorage傳遞到頁(yè)面了，本地默認(rèn)的值0變?yōu)榱藗鬟f過(guò)來(lái)的值1。

下圖中LocalStorage的值就是頁(yè)面打開時(shí)顯示的傳遞過(guò)來(lái)的值。

二

AppStorage

全局的UI狀態(tài)存儲(chǔ)，在運(yùn)行時(shí)階段可以在不同的頁(yè)面間共享信息。

我們通過(guò)在Index.ets頁(yè)面創(chuàng)建一個(gè)變量放到AppStorage中，然后分別在First.ets頁(yè)面和Second.ets頁(yè)面訪問(wèn)和修改。

實(shí)踐步驟：

1.首先在Index.ets中，通過(guò)AppStorage定義一個(gè)屬性。

AppStorage.SetOrCreate('appcount', 10);

（左右滑動(dòng)查看更多）

然后，在組件結(jié)構(gòu)體中使用StorageProp裝飾器定義一個(gè)變量，參數(shù)為之前定義的appcount屬性。

@Entry()
@Component
struct Index {


@StorageProp('appcount')appValue:number=0;

（左右滑動(dòng)查看更多）

2.在First.ets頁(yè)面中，通過(guò)StorageProp定義一個(gè)appValue變量，關(guān)聯(lián)到appcount屬性上。

struct First {
@StorageProp('appcount')appValue:number=0;

（左右滑動(dòng)查看更多）

在本地修改時(shí)，把用戶輸入的值寫入AppStorage，使用如下語(yǔ)句：

AppStorage.Set('appcount', this.textApp);

（左右滑動(dòng)查看更多）

Second.ets頁(yè)面與First.ets頁(yè)面功能完全相同，主要顯示AppStorage在不同頁(yè)面顯示和修改的效果。

如下圖，主頁(yè)面、第一個(gè)頁(yè)面和第二個(gè)頁(yè)面初始狀態(tài)下，讀取到的AppStorage中的同一個(gè)屬性的值都是10。

在第一個(gè)頁(yè)面First.ets中把AppStorage中的屬性值改為11，我們發(fā)現(xiàn)在主頁(yè)面Index.ets和Second.ets中，對(duì)應(yīng)的屬性值都發(fā)生了變化。

同樣，在第二個(gè)頁(yè)面Second.ets中把AppStorage中的屬性值改為12，我們發(fā)現(xiàn)在Index.ets和First.ets中，對(duì)應(yīng)的屬性值也都變?yōu)榱烁暮蟮闹怠?/span>

如上測(cè)試，我們發(fā)現(xiàn)的確可以通過(guò)AppStorage在不同頁(yè)面間共享數(shù)據(jù)。

三

PersistentStorage

持久化存儲(chǔ)UI狀態(tài)。保存在PersistentStorage中的數(shù)據(jù)，即使應(yīng)用退出了，對(duì)應(yīng)的值依然會(huì)保留，不是在內(nèi)存中，而是存儲(chǔ)在固定存儲(chǔ)介質(zhì)上的。

我們通過(guò)在Index.ets頁(yè)面創(chuàng)建一個(gè)屬性放到PersistentStorage中，然后分別在First.ets頁(yè)面和Second.ets頁(yè)面進(jìn)行修改，然后再重啟應(yīng)用觀察結(jié)果。

實(shí)踐步驟：

1.首先在Index.ets中，在PersistentStorage里定義一個(gè)屬性。

PersistentStorage.PersistProp('persistentcount', 100);

（左右滑動(dòng)查看更多）

然后在組件結(jié)構(gòu)體中，通過(guò)裝飾器StorageProp定義一個(gè)屬性為persistentcount的變量。

@Entry()
@Component
struct Index {
@StorageProp('persistentcount')persistentValue:number=0;

（左右滑動(dòng)查看更多）

2.在First.ets頁(yè)面中，我們通過(guò)裝飾器StorageProp定義一個(gè)變量綁定persistentcount屬性。

@Entry
@Component
structFirst{
@StorageProp('persistentcount')persistentValue:number=0;

（左右滑動(dòng)查看更多）

通過(guò)輸入框輸入新值改變?cè)瓉?lái)存儲(chǔ)在PersistentStorage的內(nèi)容。

AppStorage.Set('persistentcount', this.textPersistent);

（左右滑動(dòng)查看更多）

演示效果如下圖，Index.ets頁(yè)面，在初始時(shí)AppStorage和PersistentStorage中的對(duì)應(yīng)屬性值分別是10和100，在First.ets頁(yè)面中，我們分別改為11和111。

關(guān)閉應(yīng)用，然后重新打開，如下圖所示，AppStorage中的屬性值恢復(fù)為了10，PersistentStorage中的屬性值依舊是111，是改后的值。這證明了PersistentStorage有持續(xù)化存儲(chǔ)的作用。

四

總結(jié)

通過(guò)這次實(shí)踐，熟悉了不同的狀態(tài)變量在應(yīng)用中的不同應(yīng)用范圍，選用合適的狀態(tài)變量會(huì)讓應(yīng)用開發(fā)簡(jiǎn)單快捷，本地頁(yè)面內(nèi)部使用LocalStorage保存數(shù)據(jù)，應(yīng)用頁(yè)面間通過(guò)AppStorage傳遞信息，PersistentStorage可以持久化存儲(chǔ)數(shù)據(jù)信息。

更多推薦