ArkTS 進階之道23AppStorage 應用級狀態邊界——為啥所有頁面共享狀態頁面卸載狀態仍存在本文是「ArkTS 進階之道」系列第 23 篇續「ArkUI 狀態聯動」深水區。上篇講 Observed/ObjectLink 嵌套對象觀測槽邊界State 只觀測一層嵌套對象子屬性改不刷 UI。本文講應用級狀態邊界AppStorage 應用級全局狀態存儲——根因在所有頁面共享狀態頁面卸載狀態仍存在。能力系列篇 23 講過 AppStorage 怎么用本文講為哈 AppStorage 應用級狀態合法 State 頁面級狀態頁面卸載就銷毀——根因在應用級狀態存儲槽。一、開篇AppStorage 不是頁面級 State是應用級全局狀態存儲你寫 React 時應用級狀態是「Context 魔法」createContext Provider 全局// React 應用級狀態Context Provider const AppContext createContext({ count: 0 }) function App() { return AppContext.Provider value{{ count: 0 }}Page //AppContext.Provider } function Page() { const { count } useContext(AppContext) // 應用級 Context 全局 return Textcount{count}/Text } // React 應用級狀態Context Provider全局魔法你寫鴻蒙 ArkTS 時AppStorage應用級全局狀態存儲——所有頁面共享// ArkTS AppStorage 應用級全局狀態存儲 AppStorage.setOrCreate(appCount, 0) // ? 初始化 AppStorage 鍵應用級全局狀態 Entry Component struct Index { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Button(appCount${this.appCount}) .onClick(() { this.appCount }) // ? StorageLink 改 → AppStorage 同步 → 其他頁面同步 } } // AppStorage 應用級全局狀態所有頁面共享頁面卸載狀態仍存在Context 魔法 vs 應用級狀態存儲槽的區別React 把應用級狀態當 Context 魔法createContext Provider 全局ArkTS 把 AppStorage 當「應用級狀態存儲槽」所有頁面共享頁面卸載狀態仍存在。根因不是 Context 魔法是應用級狀態存儲槽——AppStorage 應用級全局狀態存儲所有頁面共享頁面卸載狀態仍存在。二、根因AppStorage 的應用級狀態存儲槽機制鴻蒙 ArkUI 的 AppStorage 是應用級狀態存儲槽綁定——所有頁面共享頁面卸載狀態仍存在來自三重綁定機制。機制 1AppStorage 應用級全局狀態存儲——不是頁面級 StateAppStorage 荬飾器應用級全局狀態存儲——所有頁面共享頁面卸載狀態仍存在// ? 初始化 AppStorage應用級全局狀態 AppStorage.setOrCreate(appCount, 0) AppStorage.setOrCreate(appTheme, #007DFF) Entry Component struct Index { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Column() { Text(appCount ${this.appCount}) Button(改 appCount) .onClick(() { this.appCount }) // ? StorageLink 改 → AppStorage 同步 → 其他頁面同步 } } } // AppStorage 應用級全局狀態所有頁面共享頁面卸載狀態仍存在不用重新初始化應用級全局狀態存儲AppStorageappCount應用級全局狀態存儲——所有頁面共享appCount頁面卸載狀態仍存在不用重新初始化。根因不是頁面級 State 是應用級狀態存儲槽——AppStorage 應用級全局狀態存儲所有頁面共享頁面卸載狀態仍存在。機制 2StorageLink 雙向綁定 AppStorage 鍵——改 Storage 同步其他頁面StorageLink 荬飾器雙向綁定 AppStorage 鍵——改 StorageLink → AppStorage 同步 → 其他頁面同步Entry Component struct Index { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 StorageLink(appTheme) appTheme: string #007DFF // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Column() { Text(appCount ${this.appCount}).fontColor(this.appTheme) Button(改 appCount) .onClick(() { this.appCount }) // ? StorageLink 改 → AppStorage 同步 → 其他頁面同步 Button(改 appTheme紅色) .onClick(() { this.appTheme #FF4D4F }) // ? StorageLink 改 → AppStorage 同同步 } } } // StorageLink 雙向綁定 AppStorage 鍵改 → AppStorage 同步 → 其他頁面 StorageLink 同步雙向StorageLink 雙向綁定 AppStorage 鍵StorageLinkappCount荬飾器雙向綁定 AppStorage 鍵——改appCount→ AppStorage 同步 → 其他頁面StorageLink同步雙向。根因不是頁面級狀態是應用級狀態存儲槽——StorageLink 雙向綁定 AppStorage 鍵改 → AppStorage 同步 → 其他頁面同步雙向。機制 3AppStorage.set 直接改應用級狀態——不用 StorageLink 也能改AppStorage.set直接改應用級狀態——不用 StorageLink 也能改StorageLink 自動同步Entry Component struct Index { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Column() { Text(appCount ${this.appCount}) Button(直接改 AppStorage.set(appCount, 100)) .onClick(() { AppStorage.set(appCount, 100) // ? AppStorage.set 直接改應用級狀態 // ? StorageLink appCount 自動同步StorageLink 綁定 AppStorage 鍵 }) } } } // AppStorage.set 直接改應用級狀態不用 StorageLink 也能改StorageLink 自動同步AppStorage.set 直接改應用級狀態AppStorage.setappCount直接改應用級狀態——不用 StorageLink 也能改StorageLinkappCount自動同步StorageLink 綁定 AppStorage 鍵。根因不是必須用 StorageLink 是 AppStorage.set 直接改——AppStorage.set 直接改應用級狀態StorageLink 自動同步。機制 4AppStorage vs State 頁面級狀態邊界——應用級 vs 頁面級AppStorage應用級全局狀態所有頁面共享頁面卸載狀態仍存在State頁面級狀態頁面卸載就銷毀——根因都是狀態存儲但綁的機制不同// ? AppStorage 路徑應用級全局狀態所有頁面共享頁面卸載狀態仍存在 AppStorage.setOrCreate(appCount, 0) Entry Component struct Page1 { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Button(Page1 appCount${this.appCount}).onClick(() { this.appCount }) } } Entry Component struct Page2 { StorageLink(appCount) appCount: number 0 // ? Page2 也綁定同一個 AppStorage 鍵 build() { Button(Page2 appCount${this.appCount}).onClick(() { this.appCount }) } } // ? AppStorage 應用級全局狀態Page1 改 appCount → Page2 同步所有頁面共享 // ? State 路徑頁面級狀態頁面卸載就銷毀 Entry Component struct Page3 { State pageCount: number 0 // ? State 頁面級狀態頁面卸載就銷毀 build() { Button(Page3 pageCount${this.pageCount}).onClick(() { this.pageCount }) } } // ? State 頁面級狀態Page3 卸載 pageCount 銷毀不共享不持久AppStorage vs State 頁面級狀態邊界AppStorage 路徑——應用級全局狀態所有頁面共享頁面卸載狀態仍存在推薦跨頁面狀態。State 路徑——頁面級狀態頁面卸載就銷毀單頁面狀態。根因都是狀態存儲但綁的機制不同——AppStorage 應用級全局狀態存儲槽所有頁面共享State 頁面級狀態頁面卸載就銷毀。三、真機配圖AppStorage 應用級狀態邊界——所有頁面共享狀態初始態appCount0、appTheme“#007DFF” 蝔色文字均應用級狀態初始態齊點調三按鈕后appCount100 被 AppStorage.set 直接改 100 覆蓋、appTheme“#FF4D4F” 紅色文字、AppStorage 應用級狀態同步證據齊對比證據點改 appCount 按鈕后 appCount 同步StorageLink 雙向同步點改 appTheme紅色按鈕后 appTheme“#FF4D4F” 紅色文字同步點直接改 AppStorage.set(“appCount”, 100) 按鈕后 appCount100 被 AppStorage.set 直接改 100 覆蓋StorageLink 自動同步。AppStorage 應用級全局狀態——所有頁面共享頁面卸載狀態仍存在StorageLink 雙向綁定 AppStorage 鍵AppStorage.set 直接改應用級狀態 StorageID 自動同步。四、真解法AppStorage 應用級狀態的三個場景場景 1AppStorage 應用級計數器90% 場景首選應用級狀態存儲槽AppStorage.setOrCreate(appCount, 0) Entry Component struct Index { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Column() { Text(appCount ${this.appCount}) Button(改 appCount) .onClick(() { this.appCount }) // ? StorageLink 改 → AppStorage 同步 → 其他頁面同步 } } }為哈能跑AppStorage 應用級計數器——應用級狀態存儲槽AppStorageappCount應用級全局狀態StorageLink 雙向綁定 AppStorage 鍵改appCount→ AppStorage 同步 → 其他頁面同步雙向。首選這個90% 的場景應用級跨頁面狀態用 AppStorage 應用級狀態存儲槽就夠。要寫「應用級跨頁面狀態計數器等」時用這個——不用 State 頁面級狀態頁面卸載就銷毀AppStorage 應用級狀態存儲槽所有頁面共享。場景 2AppStorage 應用級主題色應用級狀態存儲槽所有頁面共享主題AppStorage.setOrCreate(appTheme, #007DFF) Entry Component struct Index { StorageLink(appTheme) appTheme: string #007DFF // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Column() { Text(appTheme ${this.appTheme}).fontColor(this.appTheme) Button(改 appTheme紅色) .onClick(() { this.appTheme #FF4D4F }) // ? StorageLink 改 → AppStorage 同步 → 其他頁面同步 } } } // AppStorage 應用級主題色所有頁面共享 appTheme改 → AppStorage 同步 → 其他頁面同步為哈能跑AppStorage 應用級主題色——應用級狀態存儲槽AppStorageappTheme應用級全局狀態StorageLink 雙向綁定 AppStorage 鍵改appTheme→ AppStorage 同步 → 其他頁面同步雙向。要寫「應用級跨頁面主題主題色等」時用這個——不用 State 頁面級狀態頁面卸載就銷毀AppStorage 應用級狀態存儲槽所有頁面共享主題。場景 3AppStorage.set 直接改應用級狀態不用 StorageLink 也能改AppStorage.setOrCreate(appCount, 0) Entry Component struct Index { StorageLink(appCount) appCount: number 0 // ? StorageLink 雙向綁定 AppStorage 鍵 build() { Column() { Text(appCount ${this.appCount}) Button(直接改 AppStorage.set(appCount, 100)) .onClick(() { AppStorage.set(appCount, 100) // ? AppStorage.set 直接改應用級狀態 // ? StorageLink appCount 自動同步StorageLink 綁定 AppStorage 鍵 }) } } } // AppStorage.set 直接改應用級狀態不用 StorageLink 也能改StorageLink 自動同步為哈能跑AppStorage.set 直接改應用級狀態——應用級狀態存儲槽AppStorage.setappCount直接改應用級狀態StorageLinkappCount自動同步StorageLink 綁定 AppStorage 鍵。要寫「直接改應用級狀態不用 StorageLink 也能改等」時用這個——不用 StorageLink 也能改AppStorage.set 直接改應用級狀態 StorageLink 自動同步。五、一句話哲學AppStorage 不是頁面級 State是應用級全局狀態存儲槽的所有頁面共享。ArkUI 的 AppStorage 荬飾器應用級全局狀態存儲所有頁面共享頁面卸載狀態仍存在。根因不是頁面級 State 是應用級狀態存儲槽——AppStorage 應用級全局狀態存儲所有頁面共享頁面卸載狀態仍存在 StorageLink 雙向綁定 AppStorage 鍵改 → AppStorage 同步 → 其他頁面同步雙向 AppStorage.set 直接改應用級狀態不用 StorageLink 也能改 StorageLink 自動同步 AppStorage vs State 頁面級狀態邊界應用級 vs 頁面級。對比 React 應用級狀態 Context 魔法createContext Provider 全局ArkTS AppStorage 應用級狀態存儲槽所有頁面共享。狀態聯動深水區串講Watch 綁 State 變觸發副作用回調槽篇 68 Link $ 語法雙向綁定跨組件同步篇 69 Provide/Consume 跨層級傳遞槽祖輩后輩同步篇 70 Observed/ObjectLink 嵌套對象觀測槽子屬性改刷 UI篇 71 AppStorage 應用級狀態存儲槽所有頁面共享篇 72State 頁面級狀態頁面卸載就銷毀——續「ArkUI 狀態聯動」深水區講狀態聯動深水區Watch 副作用回調槽邊界 Link $ 語法雙向綁定邊界 Provide/Consume 跨層級傳遞槽邊界 Observed/ObjectLink 嵌套對象觀測槽邊界 AppStorage 應用級狀態存儲槽邊界。系列預告下篇篇 73講 LocalStorage 頁面級狀態邊界頁面級局部狀態根因續「ArkUI 狀態聯動」深水區。五階段哲學體系類型哲學50-52→ 作用域哲學53-55→ 狀態哲學56-59→ 瀆染哲學60-62→ 組件設計63-67→ 狀態聯動深水區68講清 ArkTS/ArkUI 進階哲學。能力系列回鏈能力系列篇本文進階點篇 23 AppStorage 用法AppStorage 應用級狀態存儲槽邊界根因所有頁面共享頁面卸載狀態仍存在篇 13 State 基礎用法狀態哲學State 賦值就刷 UI 依賴追蹤篇 59 Watch 用法狀態聯動深水區Watch 副作用回調槽 vs onClick 直接調副作用邊界真機 demo 完整代碼// 篇 72 demoAppStorage 應用級狀態邊界 // AppStorage 應用級全局狀態所有頁面共享頁面卸載狀態仍存在 // StorageLink/StorageProp 綁定 AppStorage 鍵 // ? 初始化 AppStorage應用級全局狀態 AppStorage.setOrCreate(appCount, 0) AppStorage.setOrCreate(appTheme, #007DFF) Entry Component struct Index { // ? StorageLink 雙向綁定 AppStorage 鍵應用級全局狀態 StorageLink(appCount) appCount: number 0 StorageLink(appTheme) appTheme: string #007DFF State log: string (未操作) build() { Column({ space: 12 }) { Text(篇 72 配圖AppStorage 應用級狀態邊界) .fontSize(16).fontWeight(FontWeight.Bold).margin({ top: 16, bottom: 4 }) Text(AppStorage 應用級全局狀態所有頁面共享頁面卸載狀態仍存在) .fontSize(11).fontColor(#888).margin({ bottom: 8 }) // ? 應用級狀態展示 Column({ space: 6 }) { Text(應用級全局狀態AppStorage) .fontSize(12).fontColor(#2563eb).fontWeight(FontWeight.Bold) Text(appCount ${this.appCount}) .fontSize(15).fontWeight(FontWeight.Bold).fontColor(#2563eb) Text(appTheme ${this.appTheme}) .fontSize(13).fontColor(this.appTheme) } .width(92%).padding(10).backgroundColor(#e0f0ff).borderRadius(8) // ? 改 AppStorage 鍵StorageLink 雙向同步 Button(改 appCountStorageLink 雙向同步) .width(92%).height(40).fontSize(12) .onClick(() { this.appCount // ? StorageLink 改 → AppStorage 同步 → 其他頁面同步 this.log 改 appCount${this.appCount}AppStorage 應用級狀態 }) Button(改 appTheme紅色StorageLink 雙向同步) .width(92%).height(40).fontSize(12) .onClick(() { this.appTheme #FF4D4F // ? StorageLink 改 → AppStorage 同步 this.log 改 appTheme紅色AppStorage 應用級狀態 }) // ? 直接改 AppStorage不用 StorageLinkAppStorage.set 直接改 Button(直接改 AppStorage.set(appCount, 100)) .width(92%).height(40).fontSize(12) .onClick(() { AppStorage.set(appCount, 100) // ? AppStorage.set → StorageLink 同步 this.log 直接改 AppStorage.set appCount100StorageLink 同步 }) Text(日志${this.log}).fontSize(10).fontColor(#333).margin({ top: 4 }) } .width(100%).height(100%).alignItems(HorizontalAlign.Center) } }寫鴻蒙 ArkUI 記住AppStorage 不是頁面級 State 是應用級全局狀態存儲槽的所有頁面共享——AppStorage 荬飾器應用級全局狀態存儲所有頁面共享頁面卸載狀態仍存在。根因不是頁面級 State 是應用級狀態存儲槽——AppStorage 應用級全局狀態存儲所有頁面共享頁面卸載狀態仍存在 StorageLink 雙向綁定 AppStorage 鍵改 → AppStorage 同步 → 其他頁面同步雙向 AppStorage.set 直接改應用級狀態不用 StorageLink 也能改 StorageLink 自動同步 AppStorage vs State 頁面級狀態邊界應用級 vs 頁面級。AppStorage 應用級計數器用應用級狀態存儲槽首選90% 場景AppStorage 應用級主題色用應用級狀態存儲槽所有頁面共享主題AppStorage.set 直接改應用級狀態不用 StorageLink 也能改 StorageLink 自動同步。應用級狀態存儲槽所有頁面共享頁面卸載狀態仍存在是 ArkUI 狀態聯動深水區核心