diff --git a/zova-docs/guide/techniques/model/introduction.md b/zova-docs/guide/techniques/model/introduction.md index 27cb5cd16..f554d5300 100644 --- a/zova-docs/guide/techniques/model/introduction.md +++ b/zova-docs/guide/techniques/model/introduction.md @@ -8,6 +8,19 @@ The base of Zova Model is [TanStack Query](https://tanstack.com/query/latest/doc - [Todo: CRUD](https://zova.js.org/zova-demo/#/demo/todo/todo) +## Four types of global state data + +In actual development, you will encounter four types of global state data: `asynchronous data (usually from the server)` and `synchronous data`, while `synchronous data` is divided into three types: `localstorage`, `cookie`, and `memory`. In the traditional Vue3, different mechanisms are used to handle these state data, while only a unified `Model` mechanism is needed in Zova + +| Global State Data | Traditional Vue3 | Zova | +| ----------------- | -------------------- | ----- | +| asynchronous data | Pinia | Model | +| localstorage | Pinia + Localstorage | Model | +| cookie | Pinia + Cookie | Model | +| memory | Pinia | Model | + +By using the `Model` mechanism to uniformly manage these global state data, you can uniformly obtain the capabilities provided by TanStack Query, including `Memory Optimization`, `Persistence` and `SSR Support`, etc., thereby standardizing data usage, simplifying code structure, and improving code maintainability + ## Features: TanStack Query The core of TanStack Query is to manage server-side data. Here are the capabilities provided by TanStack Query: @@ -17,7 +30,7 @@ The core of TanStack Query is to manage server-side data. Here are the capabilit - `Reduce duplicate requests`: When accessing data in multiple places in the program at the same time, the server api will be called only once - `Memory Optimization`: If the page component using data has been unmounted, the cached data will be automatically recycled after the specified time, thereby saving memory - `Persistence`: The local cache can be persisted and can be automatically restored when the page is refreshed to avoid server calls -- `Support SSR`: The initial data prepared on the server can be synchronized to the client and automatically complete the hydration +- `SSR Support`: The initial data prepared on the server can be synchronized to the client and automatically complete the hydration ## Features: Zova extension diff --git a/zova-docs/zh/guide/techniques/model/introduction.md b/zova-docs/zh/guide/techniques/model/introduction.md index 547b51bc1..aab131a25 100644 --- a/zova-docs/zh/guide/techniques/model/introduction.md +++ b/zova-docs/zh/guide/techniques/model/introduction.md @@ -8,6 +8,19 @@ Zova Model 的基座是[TanStack Query](https://tanstack.com/query/latest/docs/f - [Todo: CRUD](https://zova.js.org/zova-demo/#/demo/todo/todo) +## 四种全局状态数据 + +在实际开发当中,会遇到四种全局状态数据:`异步数据(一般来自服务端)`、`同步数据`。同步数据又分为三种:`localstorage`、`cookie`、`内存`。在传统的 Vue3 当中,分别采用不同的机制来处理这些状态数据,而在 Zova 中只需要采用统一的`Model`机制 + +| 状态数据 | 传统的Vue3 | Zova | +| ------------ | -------------------- | ----- | +| 异步数据 | Pinia | Model | +| localstorage | Pinia + Localstorage | Model | +| cookie | Pinia + Cookie | Model | +| 内存 | Pinia | Model | + +采用 Model 机制统一管理这些全局状态数据,就可以统一获得 TanStack Query 提供的能力,包括`内存优化`、`持久化`和`支持SSR`等等,从而规范数据使用方式,简化代码结构,提升代码的可维护性 + ## 特性:TanStack Query TanStack Query 的核心是对服务端数据进行管理,这里列举 TanStack Query 提供的能力: