存储状态

应用程序需要存储状态才能有用，否则它们只是静态页面。

Qwik 跟踪应用程序状态有两个原因

1. 在应用程序在服务器上暂停时序列化数据，并在应用程序在客户端恢复时反序列化。

2. 在存储上创建订阅，以便 Qwik 知道哪些组件需要重新渲染。如果 Qwik 不跟踪订阅，它将不得不重新渲染整个应用程序 - 这将违背延迟加载的目的。

右侧的组件尚不可用，因为 counter 只是一个没有订阅的普通对象。因此，Qwik 不知道 counter.count 何时更改，因此也不知道何时重新渲染 <App> 组件。

您的任务： 将 counter 包裹在 useStore() 中以启用依赖项跟踪和自动重新渲染。

序列化

打开 HTML 选项卡以查看服务器序列化的信息。在 <script type="qwik/json"> 块中查找序列化信息，并注意

1. {count: 0} 位于序列化状态中。
2. 在序列化状态的末尾是包含 "count" 的 subs。这些订阅告诉 Qwik 状态更改时要重新渲染哪个组件。

Qwik 状态与创建它的组件无关。状态可以传递给应用程序中的任何组件，Qwik 会创建必要的订阅并仅重新渲染受影响的组件。

下一步递归存储

编辑教程