一种基于Flux架构的不同页面状态数据同步的系统、方法及存储介质技术方案

技术编号:42068345 阅读:21 留言:0更新日期:2024-07-19 16:50
本发明专利技术提供了一种基于Flux架构的不同页面状态数据同步的系统,包括:Flux封装层;Flux封装层,封装配置在主页面的主状态库,以及配置在多个子页面的子状态库;主状态库的主状态库名称与子状态库的子状态库名称,通过唯一的通道名称绑定;系统还包括统一API通信层;统一API通信层至少封装广播通道接口;当主状态库的状态数据发生更新时,广播通道接口广播接收状态数据和通道名称,并广播接收到的状态数据和通道名称;子状态库监听通道名称并接收状态数据;子状态库根据接收到的状态数据,更新子状态库的状态数据。本发明专利技术基于一个唯一的通道名称进行数据广播,主状态库的状态数据发生更新时,子状态库的子状态库数据同时发生更新触发子页面渲染。

【技术实现步骤摘要】

本专利技术涉及计算机,特别是一种基于flux架构的不同页面状态数据同步的系统、方法及存储介质。


技术介绍

1、在基于react框架的前端项目中,react本身只涉及视图层,本质上来说一个构建交互界面的库.如果需要搭建大型项目,还需要相应的技术栈才能构成完整的前端框架。在这些技术栈中最重要的需要解决如何维护系统数据的技术,包括如何持有数据、如何处理数据的更新、数据更新如何推送到视图组件等。

2、以传统的mvc模式为例,可以把view层理解为react,使用model来保存数据,并将数据传递给view层,用户通过view层来交互,在这种情况下,操作有可能会触发一连串的反应,从一个model传递给另外一个model数据流的维护和跟踪会变得复杂。

3、所以在react大型项目中,主流采用的是另外一种架构,单向数据流架构,又称为flux架构。flux架构本身只是一种架构模式,并不是只针对react而设计,基于flux架构思想至少十数种实现方式,react技术栈实现方式主流包括redux,dva,vue技术栈实现方式包括vuex,pinia等等本文档来自技高网...

【技术保护点】

1.一种基于Flux架构的不同页面状态数据同步的系统,其特征在于,所述系统,包括:Flux封装层;

2.根据权利要求1所述的系统,其特征在于,所述主页面还配置状态管理器和主状态通信通道;

3.根据权利要求1所述的系统,其特征在于,所述主页面还配置主分配器,用于向所述主状态库发送事件,触发所述主状态库的状态数据发生更新。

4.根据权利要求1所述的系统,其特征在于,每一个所述子页面还配置子状态通信通道,用于监听所述广播通道接口广播的所述通道名称;

5.根据权利要求4所述的系统,其特征在于,每一个所述子页面还配置子分配器,用于将所述子状态通信通道...

【技术特征摘要】

1.一种基于flux架构的不同页面状态数据同步的系统,其特征在于,所述系统,包括:flux封装层;

2.根据权利要求1所述的系统,其特征在于,所述主页面还配置状态管理器和主状态通信通道;

3.根据权利要求1所述的系统,其特征在于,所述主页面还配置主分配器,用于向所述主状态库发送事件,触发所述主状态库的状态数据发生更新。

4.根据权利要求1所述的系统,其特征在于,每一个所述子页面还配置子状态通信通道,用于监听所述广播通道接口广播的所述通道名称;

5.根据权利要求4所述的系统,其特征在于,每一个所述子页面还配置子分配器,用于将所述子状态通信通道接收的所述主状态库的状态数据发生更新后完整的状态数据,发送至子状态库。...

【专利技术属性】
技术研发人员:郭大勇晏一鸣
申请(专利权)人:上海通办信息服务有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1