捕獲詞彙範圍
在本範例中，我們將探討 Qwik 如何序列化組件狀態。一種簡單的方法是讓 Qwik 僅儲存與 useStore() 相關的所有狀態。Qwik 在這方面更聰明，它會嘗試對客戶端不需要的儲存進行搖樹優化。
範例包含：
<App/>：用於建立儲存。- 儲存包含
largeData屬性。假設這是一個僅在伺服器端需要的大型資料集。HackerNews 範例就是一個例子。伺服器必須從 JSON API 擷取新聞文章，然後使用該資料進行渲染。使用者只能讀取文章，因此 HTML 回應永遠不會在客戶端重新渲染。因此，最好不要將資料傳送到客戶端。 - 一個更新無關資料的按鈕。
查看 HTML 標籤，您會注意到 largeData 已被序列化為 <script type="qwik/json">。這並不理想，因為我們正在將永遠不會更改且永遠不會用於重新渲染的資料傳送到客戶端。你在本練習中的目標是解決這個問題。
為什麼 largeData 會被序列化
Qwik 的序列化過程首先使用所有監聽器作為序列化根目錄。在我們的例子中，<button> 上的 onClick$ 被用作序列化根目錄。請注意，onClick$ 閉包會關閉 store。 onClick$ 關閉 store 的事實讓 Qwik 別無選擇，只能序列化 store 以及它的所有子屬性。
要解決這個問題，請將 onClick$ 閉包從 store.counter.count++ 改為 counter.count++。（我們已經為您建立了 counter 的區域參考。）這個更改會修改 onClick$ 閉包所捕捉的內容。捕捉更特定的參考允許 Qwik 無需序列化 largeData 屬性。
打開「HTML」標籤，您會注意到 Qwik 在此範例中不再序列化 largeData。