捕获词法作用域
在这个例子中，我们将探索 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。