一种基于Vuex架构的数据共享系统的制作方法

一种基于vuex架构的数据共享系统
技术领域
1.本技术涉及前端数据共享存储技术领域，具体而言，涉及一种基于vuex架构的数据共享系统。


背景技术：

2.目前，随着页面开发中应用程序需求的复杂化以及加载展示数据多样化，使得页面开发中交互越来越复杂，数据展示更加多样化，同时，在页面开发中管理数据状态变得越来越多、数据结构越来越复杂、数据与数据之前的交互以及数据联动越来越频繁；此外，数据类型也千差万别，有后端服务返回原始数据、用户操作界面缓存数据、ui(user interface，用户界面)状态动画数据等；此时，对应这些数据的管理变得十分复杂，哪些数据需要持久化存储、哪些数据只需要在浏览器缓存中存储以及哪些数据由视图(view)变化而变化；当应用程序复杂时，状态(state)在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；再使用原生javascript开发维护与监视上述数据变化不仅需要消耗大量人力与财力，而且其性能不高，开发与维护成本代价较高、开发周期以及开发速度不够敏捷。
3.现有技术中，vuex框架应运而生，vuex是专门为vue js应用程序设计的状态管理工具。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，也是目前在vue全家桶开发中使用比较多的状态管理框架；vuex是一种状态管理机制，将全局组件的共享状态抽取出来为一个存储单元(store)，以一个单例模式存在，应用任何一个组件中都可以使用；vuex包括state模块、mutations模块、actions模块、getters模块以及module模块；vuex提供了一种集中式存储管理应用数据状态管理思想，store中各模块相互配合，嵌套调用，完成数据存储共享；但也存在一定的不足，例如：store中模块划分存在冗余、无法持久化存储、state模块之间调用复杂、store中对state数据修改api(application programming interface，应用程序编程接口)单一等问题；针对上述vuex的缺点，目前采用引用第三方插件(如vuex-persist等)完成数据持久化操作；state模块之间数据相互调用通常使用中间变量或数据本地存储完成对应数据调用，仍然存在操作过程复杂且效率不高的问题。


技术实现要素：

4.本技术实施例的目的在于提供一种基于vuex架构的数据共享系统，可以实现简化数据操作、提高数据共享效率的技术效果。
5.本技术实施例提供了一种基于vuex架构的数据共享系统，包括：
6.存储模块，所述存储模块包括至少一个stateslice子模块，每个所述stateslice子模块根据预设业务需求创建，且每个所述stateslice子模块封装对应的数据信息，所述存储模块用于将所有的所述stateslice子模块的stateslice数据整合成统一的state数据并进行统一管理；
7.功能模块，所述功能模块用于接收调用请求，并根据所述调用请求派发预设操作方法至对应的负载单元，处理对应的stateslice数据；
8.选择器模块，所述选择器模块用于提供state数据获取工具函数并处理异步封装fetch请求；
9.获取模块，所述获取模块用于获取页面视图层的state操作处理请求，并根据所述state操作处理请求对所述state数据进行调用处理。
10.在上述实现过程中，该基于vuex架构的数据共享系统通过在存储模块创建stateslice子模块、且不同的stateslice子模块在存储模块中注册后，相互之间可以直接引用调用，数据实时保持一致；此外，功能模块可以封装、加工数据后，直接修改stateslice子模块的stateslice数据且保持stateslice数据的响应式；从而，该基于vuex架构的数据共享系统可以保持页面数据一致性以及有效应，满足不同业务场景需求下数据交互的真实性、页面展现的流畅快捷性，实现简化数据操作、提高数据共享效率的技术效果。
11.进一步地，所述存储模块包括存储配置单元，所述存储配置单元用于对所述stateslice子模块中的完整数据或部分数据进行存储持久化操作，所述存储持久化操作包括cookie、sessionstorage、localstorage、indexeddb中的一种或多种。
12.在上述实现过程中，对状态中数据提供持久化操作，提供按模块(整个的stateslice子模块的完整数据或stateslice子模块中的部分数据)进行存储；与此同时，提供不同的存储持久化方式(如cookie、sessionstorage、localstorage、indexeddb)，满足不同需求场合下数据操作。
13.进一步地，所述功能模块还用于判断所述调用请求是否为同步请求或异步请求；
14.若所述调用请求为同步请求，则派发预设派发器中的预设操作算法至对应的负载单元，处理对应的stateslice数据；
15.若所述调用请求为异步请求，则调用所述功能模块中封装的预设rxjs算法，将所述调用请求转换为rxjs流形式的rxjs流信息，对rxjs流信息进行处理操作、并根据操作后的rxjs流信息派发所述预设派发器中的预设操作算法至对应的负载单元，处理对应的stateslice数据。
16.在上述实现过程中，判断该调用请求为同步请求，则直接派发预设派发器(dispatch)中的预设操作算法，并传入对应的负载(payload)单元，处理对应的stateslice数据。
17.进一步地，所述处理操作包括过滤、转换rxjs流、处理事件流、合并流以及请求次数以及请求取消、异常处理流操作中的一种或多种。
18.进一步地，所述选择器模块包括状态工具函数单元和异步封装fetch请求单元；
19.所述状态工具函数单元用于处理stateslice子模块中的数据类型操作，通过所述数据类型操作提供简化后的处理操作api；
20.所述异步封装fetch请求单元用于在vuex架构中封装异步请求api，基于所述异步请求api创建一个异步请求对象，所述异步请求对象对于每一个请求信息以对象方式传入对应的请求方法、基于所述请求方法获得的请求结果以函数形式返回至所述异步封装fetch请求单元，且所述请求方法以钩子形式暴露给所述页面视图层调用。
21.进一步地，所述处理操作api包括如获取所有信息、根据序号或key值获取对应键
值、删除所有信息、删除部分信息、修改信息、聚合函数信息中的一种或多种。
22.进一步地，所述异步封装fetch请求单元还用于在返回请求信息至所述页面视图层时，同步返回所述请求信息的请求状态信息。
23.在上述实现过程中，在页面视图层调用时，返回请求数据的同时，返回请求状态信息，以便在不同请求时刻都可显示对应的状态信息，从而提高交互效果。
24.进一步地，所述异步封装fetch请求单元还用于缓存并修改对应stateslice子模块的数据信息。
25.在上述实现过程中，可以自动缓存并修改对应的stateslice子模块中的数据信息，从而减少页面请求次数，提高交互效果。
26.进一步地，所述请求信息包括请求路径、请求参数、请求方式、请求头中的一种或多种。
27.进一步地，所述页面视图层与所述存储模块连接，所述页面视图层通过修改state操作函数调用处理操作所述存储模块中的数据。
28.在上述实现过程中，页面视图层中直接修改对应state操作函数(如批量处理函数batch、重置数据函数reset等)，满足在页面视图层直接调用处理操作存储模块中的数据。
29.为使本技术的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
30.pa23001953
附图说明
31.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
32.图1为本技术实施例提供的基于vuex架构的数据共享系统的结构框图。
具体实施方式
33.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行描述。
34.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本技术的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
35.一般地，vuex架构包括state模块、mutations模块、actions模块、getters模块以及module模块，各模块功能如下：
36.(1)state：
37.state是一个普通的javascript对象，用于存储的单一状态，存储的基本数据；存储类型为key/value键值对；
38.(2)mutations：
39.mutations是更改state的唯一途径，mutations更改数据必须同步函数，即无法监视异步修改数据，mutation需要commit触发；
40.(3)actions：
41.actions充当一个装饰器角色，对将要修改state中数据进行加工、封装后，调用mutation进行数据修改；
42.pa23001953
43.(4)getters：
44.getters可以理解为计算属性，即对state的加工，是派生出来的数据；getter返回的值会根据它的依赖被缓存起来，只有当它的依赖值发生改变才会被重新计算；
45.(5)module：
46.module为store分隔的模块，每个模块都有自己的state、getters、mutations、actions；module主要用于根据不同业务，对应代码信息抽取，便于管理；
47.vuex架构提供了一种集中式存储管理应用数据状态管理思想，store中各模块相互配合，嵌套调用，完成数据存储共享；但也存在一定的不足，主要缺点如下：
48.(1)存储单元中模块划分存在冗余，vuex修改数据变化时，常常为页面通过dispatch调用actions方法，actions中完成对应业务逻辑后，调用mutations中方法修改state中数据，mutations中往往只是中转，存在意义不是很大；
49.(2)无法持久化存储，vuex数据存储在浏览器缓存中，当浏览器进行刷新或从新打开时，数据无法持久化保存，往往需要借助第三方开源插件或手动进行存储，操作复杂；
50.(3)state模块之间调用复杂，vuex划分不同业务模块时，不同业务模块state中数据交互使用时，相互之间调用异常复杂；此时，不同state模块中存储数据关联更新时，每一次的所有变更必须由用户触发，缺点是在复杂业务里面心智负担更大，更容易出错；
51.(4)存储单元中对state数据修改api单一，修改对应state数据时，只能通过调用对应模块后，在mutations对state中数据进行单一修改，不能对state中数据进行统一处理，重复代码量较多且对typescript支持不友好；
52.针对上述问题，本技术实施例提供了一种基于vuex架构的数据共享系统，可以应用于基于vue框架架构的单页面或多页面开发中；该基于vuex架构的数据共享系统通过在存储模块创建stateslice子模块、且不同的stateslice子模块在存储模块中注册后，相互之间可以直接引用调用，数据实时保持一致；此外，功能模块可以封装、加工数据后，直接修改stateslice子模块的stateslice数据且保持stateslice数据的响应式；从而，该基于vuex架构的数据共享系统可以保持页面数据一致性以及有效应，满足不同业务场景需求下数据交互的真实性、页面展现的流畅快捷性，实现简化数据操作、提高数据共享效率的技术效果。
53.示例性地，本技术实施例提供的基于vuex架构的数据共享系统，是基于vuex架构原理，用于改进与扩充现有vuex数据存储与共享功能缺陷，满足不同场景下业务需求开发的数据共享系统；请参见图1，图1为本技术实施例提供的基于vuex架构的数据共享系统的结构框图；该基于vuex架构的数据共享系统，包括：
54.存储模块100，存储模块100包括至少一个stateslice子模块，每个stateslice子模块根据预设业务需求创建，且每个stateslice子模块封装对应的数据信息，存储模块100用于将所有的stateslice子模块的stateslice数据整合成统一的state数据并进行统一管理；
55.在一些实施方式中，存储模块100(store模块)，store模块通过createvuexstate根据不同业务需求创建对应stateslice子模块，每一个stateslice子模块都为一个独立的功能模块200，封装对应数据信息，vuex架构中通过提供registervuexstate方法把每一个stateslice子模块注册到存储模块100中，整合成统一的state数据信息，进行统一管理；stateslice子模块中由于在整个存储模块100中进行注册，相互之间能够感知到对应的stateslice子模块中的数据与方法，因此，引用对应stateslice子模块后，可直接修改对应stateslice子模块中的数据以及调用对应方法；
56.功能模块200，功能模块200用于接收调用请求，并根据调用请求派发预设操作方法至对应的负载单元，处理对应的stateslice数据；
57.在一些实施方式中，功能模块200(actions模块)中封装了在调用方法之前对调用请求进行拦截处理的流程：判断该调用请求是否为异步请求或同步请求，并根据调用请求的类型不同执行不同的处理流程；
58.选择器模块300，选择器模块300用于提供state数据获取工具函数并处理异步封装fetch请求；
59.在一些实施方式中，选择器模块300(selector模块)提供state数据获取工具函数以及处理异步封装fetch请求两方面的功能；
60.获取模块400，获取模块400用于获取页面视图层的state操作处理请求，并根据state操作处理请求对state数据进行调用处理。
61.在一些实施方式中，获取模块400(getters模块)可以理解为计算属性，即根据state操作处理请求对state数据的加工。
62.示例性地，该基于vuex架构的数据共享系统通过在存储模块100创建stateslice子模块、且不同的stateslice子模块在存储模块100中注册后，相互之间可以直接引用调用，数据实时保持一致；此外，功能模块200可以封装、加工数据后，直接修改stateslice子模块的stateslice数据且保持stateslice数据的响应式；从而，该基于vuex架构的数据共享系统可以保持页面数据一致性以及有效应，满足不同业务场景需求下数据交互的真实性、页面展现的流畅快捷性，实现简化数据操作、提高数据共享效率的技术效果。
63.示例性地，存储模块100包括存储配置单元，存储配置单元用于对stateslice子模块中的完整数据或部分数据进行存储持久化操作，存储持久化操作包括cookie、sessionstorage、localstorage、indexeddb中的一种或多种。
64.示例性地，存储配置单元数据存储配置操作persistconfig；可选地，persistconfig为一个原生javascript对象，对状态中数据提供持久化操作，提供按模块(整个的stateslice子模块的完整数据或stateslice子模块中的部分数据)进行存储；与此同时，提供不同的存储持久化方式(如cookie、sessionstorage、localstorage、indexeddb)，满足不同需求场合下数据操作。
65.示例性地，功能模块200还用于判断调用请求是否为同步请求或异步请求；
66.若调用请求为同步请求，则派发预设派发器中的预设操作算法至对应的负载单元，处理对应的stateslice数据；
67.若调用请求为异步请求，则调用功能模块200中封装的预设rxjs算法，将调用请求转换为rxjs流形式的rxjs流信息，对rxjs流信息进行处理操作、并根据操作后的rxjs流信
息派发预设派发器中的预设操作算法至对应的负载单元，处理对应的stateslice数据。
68.在一些实施方式中，判断该调用请求为同步请求，则直接派发预设派发器(dispatch)中的预设操作算法，并传入对应的负载(payload)单元，处理对应的stateslice数据；
69.判断该调用请求为异步请求，则直接调用功能模块200中封装的预设rxjs方法，直接把对应的请求信息转化为rxjs流形式，此时，可以对rxjs流信息进行大量处理、转化操作(包括过滤、转换rxjs流、处理事件流、合并流以及请求次数以及请求取消与异常处理流操作等)；对处理后的请求信息以订阅形式返回后，派发预设派发器(dispatch)中的预设操作算法，传入对应的负载(payload)单元、处理对应的stateslice数据。
70.示例性地，对rxjs流信息进行处理操作，其中的处理操作包括：过滤、转换rxjs流、处理事件流、合并流以及请求次数以及请求取消、异常处理流操作中的一种或多种。
71.示例性地，选择器模块300包括状态工具函数单元和异步封装fetch请求单元；
72.状态工具函数单元用于处理stateslice子模块中的数据类型操作，通过数据类型操作提供简化后的处理操作api；
73.异步封装fetch请求单元用于在vuex架构中封装异步请求api，基于异步请求api创建一个异步请求对象，异步请求对象对于每一个请求信息以对象方式传入对应的请求方法、基于请求方法获得的请求结果以函数形式返回至异步封装fetch请求单元，且请求方法以钩子形式暴露给页面视图层调用。
74.示例性地，状态工具函数单元包括state工具函数，其主要处理stateslice子模块中复杂数据类型(数据或对象)操作，提供大量简化处理操作api，如获取所有信息(findall)、根据序号或key值获取对应键值(findbykey)、删除所有信息(deleteall)、删除部分信息(deletebyindex)、修改信息(insertbyindex)、聚合函数信息(sum、count、avg，max，min)等其它工具函数；满足在不同业务需求获取对应数据信息；
75.对于异步封装fetch请求单元，其原理为在vuex中封装异步请求api，通过createvuexapi创建一个异步请求对象，对于每一个请求信息(请求路径、请求参数，请求方式，请求头等)以对象方式传入每一个请求方法，请求结果以函数形式返回，同时以hooks钩子形式(例如：usexxxxquery、usexxxxmutation)暴露出对应方法供页面视图层调用。
76.示例性地，处理操作api包括如获取所有信息、根据序号或key值获取对应键值、删除所有信息、删除部分信息、修改信息、聚合函数信息中的一种或多种。
77.示例性地，异步封装fetch请求单元还用于在返回请求信息至页面视图层时，同步返回请求信息的请求状态信息。
78.示例性地，在页面视图层调用时，返回请求数据的同时，返回请求状态信息，以便在不同请求时刻都可显示对应的状态信息，从而提高交互效果。
79.示例性地，异步封装fetch请求单元还用于缓存并修改对应stateslice子模块的数据信息。
80.示例性地，可以自动缓存并修改对应的stateslice子模块中的数据信息，从而减少页面请求次数，提高交互效果。
81.示例性地，请求信息包括请求路径、请求参数、请求方式、请求头中的一种或多种。
82.示例性地，页面视图层与存储模块100连接，页面视图层通过修改state操作函数
调用处理操作存储模块100中的数据。
83.示例性地，页面视图层中直接修改对应state操作函数(如批量处理函数batch、重置数据函数reset等)，满足在页面视图层直接调用处理操作存储模块100中的数据。
84.在一些实施场景中，结合图1及上述内容，本技术实施例提供的基于vuex架构的数据共享系统，使用流程示例如下：
85.(1)主入口文件引入对应包js文件以及对应store文件后，挂在到对应根节点信息下，采用装饰器方式包装对应根组件文件以及注入store中state数据；
86.(2)在使用组件中，通过调用对应api或hooks函数，调用state中数据或actions方法，获取或修改对应存储信息；
87.(3)在类式组件中通过@inject装饰后注入对应store中信息后，组件中可以直接使用state数据或调用与action中方法；
88.(4)在vue3 setup语法糖中，提供提供对应的usestate hooks函数获取对应state中数据，以及useaction函数、useselector获取对应方法调用；
89.示例性地，本技术实施例提供的基于vuex架构的数据共享系统，至少包括以下有益效果：
90.(1)针对vuex中数据持久化问题，提供灵活配置可以按整体模块或部分信息以不同存储方式进行数据存储，满足在不同业务需求下，数据持久化问题，避免使用额外插件存储数据，提高代码统一度，便于后期开发维护；
91.(2)扩充selector模块，提供大量state处理函数处理复杂数据类型以及内部封装异步请求函数，处理服务端请求，缓存请求数据以及返回对应求情状态信息，减少非必要请求，一定程度上提高用户交互体验以及页面加载速度；
92.(3)actions模块中封装rxjs请求转换流，以订阅事件方式处理异步请求，同时提供便捷请求处理操作以及请求结果以流式方式处理与转换，更加便捷与高效处理请求结果数据，满足存储不同数据类型转换需求；
93.(4)简化vuex模块调用流程，去除冗余模块，简化操作流程，同时提高丰富state处理api以及hooks函数，很大程度上减少模板代码书写，简化项目代码体积，一定程度上提高浏览器加载项目速度，提高页面渲染能力。
94.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本技术的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
95.另外，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
96.所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
97.以上所述仅为本技术的实施例而已，并不用于限制本技术的保护范围，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
98.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应所述以权利要求的保护范围为准。
99.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

技术特征：
1.一种基于vuex架构的数据共享系统，其特征在于，包括：存储模块，所述存储模块包括至少一个stateslice子模块，每个所述stateslice子模块根据预设业务需求创建，且每个所述stateslice子模块封装对应的数据信息，所述存储模块用于将所有的所述stateslice子模块的stateslice数据整合成统一的state数据并进行统一管理；功能模块，所述功能模块用于接收调用请求，并根据所述调用请求派发预设操作方法至对应的负载单元，处理对应的stateslice数据；选择器模块，所述选择器模块用于提供state数据获取工具函数并处理异步封装fetch请求；获取模块，所述获取模块用于获取页面视图层的state操作处理请求，并根据所述state操作处理请求对所述state数据进行调用处理。2.根据权利要求1所述的基于vuex架构的数据共享系统，其特征在于，所述存储模块包括存储配置单元，所述存储配置单元用于对所述stateslice子模块中的完整数据或部分数据进行存储持久化操作，所述存储持久化操作包括cookie、sessionstorage、localstorage、indexeddb中的一种或多种。3.根据权利要求2所述的基于vuex架构的数据共享系统，其特征在于，所述功能模块还用于判断所述调用请求是否为同步请求或异步请求；若所述调用请求为同步请求，则派发预设派发器中的预设操作算法至对应的负载单元，处理对应的stateslice数据；若所述调用请求为异步请求，则调用所述功能模块中封装的预设rxjs算法，将所述调用请求转换为rxjs流形式的rxjs流信息，对rxjs流信息进行处理操作、并根据操作后的rxjs流信息派发所述预设派发器中的预设操作算法至对应的负载单元，处理对应的stateslice数据。4.根据权利要求3所述的基于vuex架构的数据共享系统，其特征在于，所述处理操作包括过滤、转换rxjs流、处理事件流、合并流以及请求次数以及请求取消、异常处理流操作中的一种或多种。5.根据权利要求1所述的基于vuex架构的数据共享系统，其特征在于，所述选择器模块包括状态工具函数单元和异步封装fetch请求单元；所述状态工具函数单元用于处理stateslice子模块中的数据类型操作，通过所述数据类型操作提供简化后的处理操作api；所述异步封装fetch请求单元用于在vuex架构中封装异步请求api，基于所述异步请求api创建一个异步请求对象，所述异步请求对象对于每一个请求信息以对象方式传入对应的请求方法、基于所述请求方法获得的请求结果以函数形式返回至所述异步封装fetch请求单元，且所述请求方法以钩子形式暴露给所述页面视图层调用。6.根据权利要求5所述的基于vuex架构的数据共享系统，其特征在于，所述处理操作api包括如获取所有信息、根据序号或key值获取对应键值、删除所有信息、删除部分信息、修改信息、聚合函数信息中的一种或多种。7.根据权利要求5所述的基于vuex架构的数据共享系统，其特征在于，所述异步封装fetch请求单元还用于在返回请求信息至所述页面视图层时，同步返回所述请求信息的请
求状态信息。8.根据权利要求6所述的基于vuex架构的数据共享系统，其特征在于，所述异步封装fetch请求单元还用于缓存并修改对应stateslice子模块的数据信息。9.根据权利要求5所述的基于vuex架构的数据共享系统，其特征在于，所述请求信息包括请求路径、请求参数、请求方式、请求头中的一种或多种。10.根据权利要求1所述的基于vuex架构的数据共享系统，其特征在于，所述页面视图层与所述存储模块连接，所述页面视图层通过修改state操作函数调用处理操作所述存储模块中的数据。

技术总结
本申请实施例提供一种基于Vuex架构的数据共享系统，涉及前端数据共享存储技术领域。该基于Vuex架构的数据共享系统包括：存储模块，包括至少一个stateSlice子模块，每个stateSlice子模块根据预设业务需求创建，且每个stateSlice子模块封装对应的数据信息；功能模块，用于接收调用请求，并根据调用请求派发预设操作方法至对应的负载单元，处理对应的stateSlice数据；选择器模块，用于提供state数据获取工具函数并处理异步封装fetch请求；获取模块，用于获取页面视图层的state操作处理请求，并根据state操作处理请求对state数据进行调用处理。行调用处理。行调用处理。


技术研发人员：李海华
受保护的技术使用者：北京佳讯飞鸿电气股份有限公司
技术研发日：2023.04.20
技术公布日：2023/7/20