目录
四种全局状态数据在现实开辟当中，会碰到四种全局状态数据：[code]异步数据（一样平常来自服务端）[/code]、[code]同步数据[/code]。同步数据又分为三种：[code]localstorage[/code]、[code]cookie[/code]、[code]内存[/code]。在传统的 Vue3 当中，分别接纳差别的机制来处理惩罚这些状态数据，而在 Zova 中只必要接纳统一的[code]Model[/code]机制
接纳 Model 机制统一管理这些全局状态数据，就可以提供一些通用的系统本领，好比，[code]内存优化[/code]、[code]持久化[/code]和[code]SSR支持[/code]等等，从而规范数据利用方式，简化代码结构，提拔代码的可维护性 特性1. 支持异步数据和同步数据Zova Model 的基座是TanStack Query。TanStack Query 提供了强大的数据获取、缓存和更新本领。如果你没有利用过类似TanStack Query的数据管理机制，那么强烈发起相识一下，相信你肯定会受到思想的洗礼 特性2. 自动缓存对获取的异步数据进行本地缓存，避免重复获取。对于同步数据，会自动针对 localstorage 或者 cookie 进行读写操作 特性3. 自动更新提供数据过期战略，在符合的时机自动更新 特性4. 淘汰重复请求在程序的多个地方同时访问数据，将只调用一次服务端 api。如果是同步数据，也只针对 localstorage 或者 cookie 调用一次操作 特性5. 内存优化通过 Zova Model 管理的数据，虽然是全局范围的状态，但是并不总是占用内存，而是提供了内存释放与回收的机制。具体而言，就是在创建 Vue 组件实例时根据业务的必要创建缓存数据，当 Vue 组件实例卸载时释放对缓存数据的引用，到达约定的过期时间如果仍旧没有其他 Vue 组件引用，就会触发回收机制(GC)，完成对内存的释放，从而节省内存占用。这对于大型项目，用户必要长时间进行界面交互的场景，具有明显的好处 特性6. 持久化本地缓存可以持久化，当页面刷新时可以自动规复，避免服务端调用。如果是异步数据，就会自动持久化到 IndexDB 中，从而满足大数据量的存储必要。如果是同步数据，就会自动持久化到 localstorage 或者 cookie [code]内存优化[/code]与[code]持久化[/code]配合发挥作用，对于大型项目效果更佳明显。好比，第一次从服务端获取的数据，会天生本地缓存，并自动持久化。当页面不再利用并且过期时，会自动销毁本地缓存，从而释放内存。当再次访问该数据时，会自动从持久化中规复本地缓存数据，而不是再次从服务端获取数据 特性7. SSR支持差别类型的状态数据，在 SSR 模式下也会有差别的实现机制。Zova Model 把这些状态数据的差异进行抹平，并且接纳统一的机制进行水合，从而让 SSR 的实现更加自然、直观，明显低沉了心智负担 特性8. 自动定名空间隔离Zova 通过 Model Bean 来管理数据。而 Bean 本身有唯一的标识，可以作为数据的定名空间，从而自动保证了 Bean 内部状态数据定名的唯一性，避免数据冲突
怎样创建一个Model BeanZova提供了VS Code插件，通过右键菜单可以非常便利的创建一个Model Bean [code]右键菜单 - [模块路径]: [code]Zova Create/Bean: Model[/code][/code]依据提示输入 model bean 的名称，好比[code]todo[/code]，VSCode 插件会自动添加 model bean 的代码骨架 好比，在 demo-todo 模块中创建一个 Model Bean [code]todo[/code] [code]demo-todo/src/bean/model.todo.ts[/code] [code]import { Model } from 'zova'; import { BeanModelBase } from 'zova-module-a-model'; @Model() export class ModelTodo extends BeanModelBase {}[/code]
异步数据TanStack Query 的核心是对服务端数据进行管理。为简化起见，这里仅展示select方法的定义与利用:
怎样定义[code]@Model() export class ModelTodo { select() { return this.$useQueryExisting({ queryKey: ['select'], queryFn: async () => { return this.scope.service.todo.select(); }, }); } }[/code]
怎样利用[code]demo-todo/src/page/todo/controller.ts[/code] [code]import { ModelTodo } from '../../bean/model.todo.js'; export class ControllerPageTodo { @Use() $$modelTodo: ModelTodo; }[/code]
[code]demo-todo/src/page/todo/render.tsx[/code] [code]export class RenderTodo { render() { const todos = this.$$modelTodo.select(); return ( <div> <div>isLoading: {todos.isLoading}</div> <div> {todos.data?.map(item => { return <div>{item.title}</div>; })} </div> </div> ); } }[/code]
怎样支持SSR在 SSR 模式下，我们必要如许利用异步数据：在服务端加载状态数据，然后通过 render 方法渲染成 html 字符串。状态数据和 html 字符串会同时发送到客户端，客户端在进行水合时仍旧利用此相同的状态数据，从而保持状态的一致性 要实现以上逻辑，在 Zova Model 中只必要实行一个步骤： [code]demo-todo/src/page/todo/controller.ts[/code] [code]import { ModelTodo } from '../../bean/model.todo.js'; export class ControllerPageTodo { @Use() $$modelTodo: ModelTodo; protected async __init__() { const queryTodos = this.$$modelTodo.select(); await queryTodos.suspense(); if (queryTodos.error) throw queryTodos.error; } }[/code]
同步数据: localstorage由于服务端不支持[code]window.localStorage[/code]，因此 localstorage 状态数据不参与 SSR 的水合过程 下面演示把用户信息存入 localstorage，当页面刷新时也会保持状态 怎样定义[code]export class ModelUser extends BeanModelBase { user?: ServiceUserEntity; protected async __init__() { this.user = this.$useQueryLocal({ queryKey: ['user'], }); } }[/code]
怎样利用直接像常规变量一样读取和设置数据 [code]const user = this.user; this.user = newUser;[/code]同步数据: cookie在服务端会自动利用[code]Request Header[/code]中的 Cookies，在客户端会自动利用[code]document.cookie[/code]，因此会自动保证 SSR 水合过程中 cookie 状态数据的一致性 下面演示把用户 Token 存入 cookie，当页面刷新时也会保持状态。如许，在 SSR 模式下，客户端和服务端都可以利用相同的[code]jwt token[/code]访问后端 API 服务 怎样定义[code]export class ModelUser extends BeanModelBase { token?: string; protected async __init__() { this.token = this.$useQueryCookie({ queryKey: ['token'], }); } }[/code]
怎样利用直接像常规变量一样读取和设置数据 [code]const token = this.token; this.token = newToken;[/code]同步数据: 内存在 SSR 模式下，服务端定义的全局状态数据会同步到客户端，并自动完成水合 下面演示基于内存的全局状态数据 怎样定义[code]zova-ui-quasar/src/suite-vendor/a-quasar/modules/quasar-adapter/src/bean/model.theme.ts[/code] [code]export class ModelTheme extends BeanModelBase { cBrand: string; protected async __init__() { this.cBrand = this.$useQueryMem({ queryKey: ['cBrand'], }); } }[/code]
怎样利用直接像常规变量一样读取和设置数据 [code]const cBrand = this.cBrand; this.cBrand = newValue;[/code]结语Zova 是一款支持 IOC 容器的 Vue3 框架，在代码风格上结合了Vue/React/Angular的长处，同时规避他们的缺点，让我们的开辟体验更加优雅，减轻心智负担。Zova已经内置了大量实用、有趣的功能特性，Model机制仅仅是此中一个 Zova框架已经开源，欢迎关注，参与共建：https://github.com/cabloy/zova。 到此这篇关于在Vue3中实现四种全局状态数据的统一管理的方法的文章就先容到这了,更多相关Vue3全局状态数据内容请搜刮脚本之家从前的文章或继续浏览下面的相关文章盼望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/3285591ol.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 22:22 , Processed in 0.033148 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
