CN116069415B - 动态数据加载方法、装置、存储介质和电子设备 - Google Patents

Abstract

本申请提供了一种动态数据加载方法、装置、存储介质和电子设备，属于数据处理技术领域。所述方法包括：接收针对目标动态数据的加载请求，所述加载请求中包含所述目标动态数据的数据标识；根据所述加载请求调用基于vuex实例化的状态管理容器；从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据；若存在，则当所述目标动态数据未超期时，从所述插件状态的symbol对象中获取所述目标动态数据；将所述目标动态数据加载到页面中。本申请可减少数据的重复处理加载过程，降低了对系统内存的占用。

Description

动态数据加载方法、装置、存储介质和电子设备

技术领域

本申请涉及数据处理领域，尤其涉及一种动态数据加载方法、装置、存储介质和电子设备。

背景技术

在MES系统（manufacturing execution system）中的单页应用（single page webapplication，SPA）开发过程中，经常会涉基础数据的处理，这些基础数据包括车间分厂数据、工位数据、产线数据、订单数据等。这些基础数据由后台系统动态配置，可以添加和修改，因此需要通过请求动态获取。

MES系统中很多页面都需要加载这些动态的基础数据，传统的动态数据加载方法通常需要重复的处理，判断待加载的数据是否读取和超期，执行数据获取加载逻辑，增加开发人员的工作量，同时这种重复处理加载过程也需要占用系统大量的内存。

发明内容

本申请的目的在于提供一种订单数据加载方法、装置、存储介质和电子设备，以解决上述的至少一种问题。

本申请第一方面，提供了一种动态数据加载方法，所述方法包括：

接收针对目标动态数据的加载请求，所述加载请求中包含所述目标动态数据的数据标识；

根据所述加载请求调用基于vuex实例化的状态管理容器；

从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据；

若存在，则当所述目标动态数据未超期时，从所述插件状态的symbol对象中获取所述目标动态数据；

将所述目标动态数据加载到页面中。

在其中一个实施例中，所述方法还包括：创建所述插件状态，所述插件状态包括内部状态state、所述派生状态getter和内部状态修改方式mutation；

从预设的对象数组中读取所述目标动态数据的配置信息，所述配置信息包括动态数据的数据标识和请求地址统一资源定位符url；

基于所述数据标识创建所述symbol对象，将所述symbol对象加载至所述内部状态state中，并在所述派生状态getter中加载数据标识属性；

将所述插件状态注册到所述状态管理容器中。

在其中一个实施例中，所述插件状态还包括懒加载属性；所述方法还包括：

检测所述懒加载属性，当所述懒加载属性为真时，则在检测到对所述目标动态数据的获取请求时，从所述派生状态getter中的数据标识属性获取所述目标动态数据；

当所述懒加载属性为假时，直接执行所述将所述插件状态注册到所述状态管理容器中。

在其中一个实施例中，所述方法还包括：述插件状态中不存在所述目标动态数据时，发起所述目标动态数据获取请求；

根据所述获取请求检测是否存在所述目标动态数据；

当不存在所述目标动态数据时，通过所述目标动态数据对应的url创建所述目标动态数据；

将所述目标动态数据缓存至所述插件状态中。

在其中一个实施例中，所述方法还包括：根据所述插件状态中的超期时间属性检测所述目标动态数据是否超期；

当所述超期时间属性值不大于0时，判定所述目标动态数据未超期；

当所述超期时间属性值大于0时，基于当前时间计算所述目标动态数据的获取持续时长；

当所述超期时间属性值不小于所述持续时长时，判定所述目标动态数据未超期；

当所述超期时间属性值小于所述持续时长时，判定所述目标动态数据超期。

在其中一个实施例中，所述方法还包括：当所述目标动态数据超期时，执行所述发起所述目标动态数据获取请求，并在所述插件状态中缓存所述目标动态数据成功时，更新所述目标动态数据的获取时间戳。

在其中一个实施例中，所述插件状态的内部状态为私有化状态，所述从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据，包括：从所述状态管理容器中访问与所述数据标识对应的插件状态的派生状态getter，检测所述插件状态中是否存在与所述数据标识对应的所述目标动态数据。

本申请第二方面，提供了一种动态数据加载装置，所述装置包括：

加载请求获取模块，用于接收针对目标动态数据的加载请求，所述加载请求中包含所述目标动态数据的数据标识；

动态数据获取模块，用于根据所述加载请求调用基于vuex实例化的状态管理容器；从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据；若存在，则当所述目标动态数据未超期时，从所述插件状态的symbol对象中获取所述目标动态数据；

动态数据加载模块，用于将所述目标动态数据加载到页面中。

本申请第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有可执行指令，所述可执行指令被处理器执行时使所述处理器执行本申请第一方面所述的方法。

本申请第三方面，提供了一种电子设备，包括：一个或多个处理器；

存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如本申请第一方面所述的方法。

本申请中的订单数据加载方法、装置、存储介质和电子设备，通过设置基于vuex的状态管理容器，并对其中的状态数据设置超期时间，在进行目标动态数据加载的时候，从该状态管理容器中来读取对应的目标动态数据，并进行超期检测，将未超期的数据加载至目标页面中，可以减少数据的重复处理加载过程，降低了对系统内存的占用，且能够减少开发人员的工作量。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对本申请范围的限定。

图1为一个实施例中动态数据加载方法的流程示意图；

图2为另一个实施例中动态数据加载方法的流程示意图；

图3为又一个实施例中动态数据加载方法的流程示意图；

图4为一个实施例中目标页面的示意图；

图5为一个实施例中动态数据加载装置的结构框图；

图6为另一个实施例中动态数据加载装置的结构框图；

图7为一个实施例中电子设备的结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请所使用的所有术语（包括技术和科学术语）具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

比如本申请所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本申请的范围的情况下，可以将第一状态管理容器称为第二状态管理容器，且类似地，可将第二状态管理容器称为第一状态管理容器。第一状态管理容器和第二状态管理容器两者都是状态管理容器，但其不是同一个状态管理容器。

再比如本申请所使用的术语“包括”、“包含”等表明了特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在一个实施例中，结合图1所示，提供了一种动态数据加载方法，该方法包括：

步骤102，接收针对目标动态数据的加载请求。

本实施例中，该加载请求中包含目标动态数据的数据标识。动态数据为系统中的一些基础数据，这些基础数据是后台系统动态配置的，需要经常被调用。基础数据是系统的数据字典，在系统初始化的时候，就存在于系统数据库中，是结构性或者功能性的支撑。

举例来说，基础数据可为ERP系统、MES系统中的基础数据。以MES系统为例，这些基础数据包括组织结构数据、生产角色与员工数据、设备资源数据、工作流与操作规范数据、产品信息产品物料信息、生产过程数据等。其中，设备资源数据可包括EMS系统中的分厂数据，比如企业的下料分厂、钢结构分厂、调试分厂等设置的各个分厂的数据；生产角色与员工数据可包括针对不同的架构或分厂或订单所设置的相关人员的生产角色；设备资源可包括各种设备的使用状态等数据，比如设备的编号、工作状态等；产品信息产品物料信息、生产过程数据可包括生产订单数据。动态数据可定期或不定期地更新，产生变化。

页面上提供有需要进行加载动态数据的相关控件，在该控件被触控时，可触发相应的加载请求。比如用户可在客户端展示的页面上点击相关控件，比如可选择点击某个分厂数据的控件，客户端接收到该触控操作从而生成对应的加载请求，将该加载请求发送到电子设备。该控件可为按钮、也可以为下拉菜单等控件。可选地，可通过在控件中选择具体需要加载的动态数据作为目标动态数据，从而触发该加载请求。目标动态数据即为待加载的动态数据。

步骤104，根据加载请求调用基于vuex实例化的状态管理容器。

本实施例中，预先创建了状态管理容器store，该状态管理容器是基于vuex创建的。vuex是专门为vue.js应用程序开发的状态管理模式。它采用集中式存储，管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。对于需要加载的信息(或数据)，需要保存在应用程序中的某一个位置，对于这些信息(或数据)的管理即称之为是状态管理。其中需要使用的数据即称之为状态state。状态管理容器可存储相关数据，该数据在状态管理容器中可称之为状态数据。

电子设备预先设定了页面与状态管理容器之间的对应关系，基于该对应关系，可以确定需要调用的状态管理容器。该状态管理容器可为下述的第二状态管理容器。

步骤106，从状态管理容器中检测与数据标识对应的插件状态中是否存在与数据标识对应的目标动态数据。若存在，则执行步骤108。

其中，在状态管理容器中预先注册了目标动态数据，该目标动态数据可从状态管理容器的插件状态中的数据标识来查询。数据标识用于唯一标识相应的数据，可为数据名称、属性名称prop等。

具体地，将插件函数注入到vuex的配置项中，vuex在实例化状态管理容器的时候，会执行插件函数，读取传入的配置信息，创建插件状态。将插件状态注册到状态管理容器中，通过状态管理容器属性访问状态数据，执行插件状态里的数据访问方法。

步骤108，当目标动态数据未超期时，从插件状态的symbol对象中获取目标动态数据。

当状态管理容器中存在目标动态数据时，还需要进一步检测该目标动态数据是否超期，其中，由于动态数据的信息是会更新的，因此，存在于状态管理容器中的目标数据还设置了对应的超期时间timeout。该超期时间可用来判定动态数据是否是有效的数据，当检测到未超期时，则可以从插件状态的symbol对象symbolProp中获取目标动态数据。

具体地，可预先根据数据标识创建symbol对象，将其添加到插件状态的内部状态state中，将symbol对象保存到内部的映射表中，从而可以通过数据标识prop获取到symbol对象symbolProp，进而根据symbol对象获取到对应的目标动态数据。

步骤110，将目标动态数据加载到页面中。

在获取到目标动态数据后，可根据页面配置信息，将该目标动态数据加载至页面中的相应位置，从而将目标动态数据显示给用户。

本申请中的动态数据加载方法，通过将目标数据存储在vuex的状态管理容器中，进而在接收到用户对目标数据的加载请求时，通过从状态管理容器中获取对应的目标动态数据，从而可以降低了开发人员的工作量。

在一个实施例中，上述方法还包括向状态管理容器中注册动态数据的过程。该过程可在步骤102之前预先执行。其包括：创建插件状态，插件状态包括内部状态state、派生状态getter和内部状态修改方式mutation；从预设的对象数组中读取目标动态数据的配置信息，配置信息包括动态数据的数据标识和请求地址统一资源定位符url；基于数据标识创建symbol对象，将symbol对象加载至内部状态state中，并在派生状态getter中加载数据标识属性；将插件状态注册到状态管理容器中。

其中，可预先创建配置对象数组，对象数组中的每一项为配置项，每配置项包括属性名称prop、请求地址url、超期时间timeout、懒加载lazy、默认值defaultValue等属性。超期时间和懒加载可以不配置，比如可设置默认超期时间为0，该“0”表示不超期，懒加载为真true，可以理解地，还可以根据需要配置为其他属性。不同的动态数据可以设置不同的超期时间。

通过vuex实例化状态管理容器对象，执行插件方法。具体地，创建插件状态pluginState，插件状态包含相应的内部状态state、派生状态getter和内部状态修改的方式mutation。通过遍历对象数组中的每个配置项，读取配置项的属性名称prop、请求地址url、超期时间timeout、懒加载LazyLoad等属性。

根据属性名称prop创建symbol对象symbolProp作为私有化属性，添加到内部状态state中，用来私有化保存内部状态state，同时将symbol对象symbolProp保存到内部的映射表中，可以通过prop获取到symbol对象symbolProp。

具体地，可在派生状态getter对象中添加prop属性。通过属性名称prop，可以执行通用的访问方法，能够获取到属性名称prop所对应的私有状态的symbol对象symbolProp。在配置项读取完毕后，将创建的pluginState注册到状态管理容器中。

本实施例中，通过向状态管理容器中注册相应的基础数据，从而可以实现从状态管理容器中加载对应的基础数据。且进一步地，通过对注册至状态管理容器中的基础数据进行私有化设置，使得可以通过使用状态管理容器中的getter方法可以快速地进行数据的加载，提高了系统的健壮性。相比于vuex中传统的派发action操作来动态请求数据而言，通过getter方法不会担心action变化的时候会对多个页面造成影响，有可能影响到多个界面。同时，通过私有化内部属性的方式，可以确保动态基础数据不会被意外修改，确保了数据的安全性，并且可以让开发人员通过属性的方式直接读取动态数据，无需关心数据的加载逻辑和时机。

在一个实施例中，插件状态还包括懒加载属性。动态数据加载方法还包括：检测懒加载属性，当懒加载属性为真时，则在检测到对目标动态数据的获取请求时，从派生状态getter中的数据标识属性获取目标动态数据；当懒加载属性为假时，直接执行将插件状态注册到状态管理容器中。可选地，可将状态管理容器中的目标动态数据对应的懒加载属性设置为真。

其中，懒加载为真true时，表示对数据不进行立即加载，为否false时，则进行立即加载。可判断懒加载属性，若为真true，则执行一次getter中prop属性的方法，若为否false，则直接注册至状态管理容器中。通过设置懒加载，可对基础数据中需要进行立即记载的数据进行立即加载，对于无需立即加载的数据，则根据用户的加载请求来进行加载，提高了数据加载的灵活性。

在一个实施例中，上述方法还包括：当插件状态中不存在目标动态数据时，发起目标动态数据获取请求；根据获取请求检测是否存在目标动态数据；当不存在目标动态数据时，通过目标动态数据对应的url创建目标动态数据；将目标动态数据缓存至插件状态中。

本实施例中，当状态管理容器中未预先加载目标动态数据时，插件状态中不存在对应的目标动态数据。此时，可根据该数据标识获取对应的请求地址url，根据该url读取到对应的目标动态数据，将该目标动态数据缓存之插件状态中。具体地，当初次加载网站的时候或者状态数据超时被重置的时候，插件状态中不存在对应的目标动态数据。当初次打开目标页面所在平台或系统的浏览器窗口时，属于初次加载网站；而在该窗口下关闭又重新打开目标页面（比如打开如图4所示的目标页面）时，则不属于初次加载网站。

在一个实施例中，插件状态的内部状态为私有化状态，电子设备可从状态管理容器中访问与数据标识对应的插件状态的派生状态getter，检测插件状态中是否存在与数据标识对应的目标动态数据。其中，当该派生状态getter不存在私有化状态时，则判定不存在目标动态数据。

状态不存在，则发起http网络请求，通过该url获取数据，并返回默认值defaultValue。

在一个实施例中，在通过url获取到相关数据之后，可进一步检测所获取的数据的数据结构是否与需要存储的数据的数据结构一致，当不一致时，对其数据结构进行调整，使得调整为与需要存储的数据的数据结构一致。举例来说，所获取到的数据可能为两层结构的数据，也可能为三层结构的数据，当设置的需要存储的数据的结构为两层结构时，则将获取到的三层结构的数据调整为两层结构的数据进行缓存。

在一个实施例中，还可以从本地存储中获取目标动态数据。其中，客户端可在上次加载了目标动态数据之后，将该动态数据存储至浏览器缓存中。由于vuex中的数据无法持久化，通过将目标动态数据存储至本地存储中，当需要获取目标动态数据时，可从本地存储中获取目标动态数据，从而可以提高数据的获取效率。可选地，本地存储的数据为统一了数据结构后的数据，这样，从本地存储中获取到的数据可以省略掉数据结构的调整。

在一个实施例中，上述方法还包括：根据插件状态中的超期时间属性检测目标动态数据是否超期；当超期时间属性值不大于0时，判定目标动态数据未超期；当超期时间属性值大于0时，基于当前时间计算目标动态数据的获取持续时长；当超期时间属性值小于持续时长时，判定目标动态数据超期；当超期时间属性值不小于持续时长时，判定目标动态数据未超期。

其中，在步骤108之前，上述方法还进一步检测状态管理容器中的目标动态数据是否超期。具体的，可基于插件状态中的超期时间timeout属性来判定目标动态数据是否超期。其中，可检测该超期时间属性值是否大于0，在加载目标动态数据至状态管理容器中的时候，可设置超期时间属性值，设置为0即表示该数据不超期。设置大于0则表示其存在有效期限。当读取到该数值不大于0时，则可以判定不超期。

当大于0时，则需要检测数据的获取持续时长与超期时间属性值之间的大小。获取持续时长可为动态数据注册到状态管理容器中的注册时刻与当前时间之间的时长大小。该注册时刻可为动态数据最近一次被成功注册至状态管理容器中时所记录的时间戳。当超期时间属性值小于持续时长时，则判定超期，当超期时间属性值不小于持续时长时，则判定不超期。

在一个实施例中，当目标动态数据超期时，执行发起目标动态数据获取请求，并在插件状态中缓存目标动态数据成功时，更新目标动态数据的获取时间戳，并在获取请求结束后清除该获取请求对象，防止多次访问的时候频繁的发起请求。

在数据超期的情况下，则需要重新进行目标动态数据加载，并在动态数据加载成功时，更新目标动态数据的获取时间戳。

在一个实施例中，如图2所示，提供了另一种动态数据加载方法，该方法包括：

步骤202，接收针对目标动态数据的加载请求。

可选地，接收针对客户端上的目标动态数据对应的控件的加载请求操作而触发的加载请求，加载请求中包含目标动态数据的数据标识。

步骤204，根据加载请求调用基于vuex实例化的状态管理容器。

其中，目标动态数据被预先注册到了状态管理容器中。且该目标动态数据在状态管理容器中是以私有化形式注册至状态管理容器中。通过对其进行私有化，从而可以防止基础数据被操作篡改，只能进行读取操作。

步骤206，从状态管理容器中检测与数据标识对应的插件状态中是否存在与数据标识对应的目标动态数据。若是，则执行步骤208，否则，执行步骤210。

其中，可检测需要加载的目标动态数据在插件状态中是否存在，若存在，则执行步骤208，否则，执行步骤210。

步骤208，根据插件状态中的超期时间属性检测目标动态数据是否超期。若是，执行步骤210，否则，执行步骤218。

当存在目标动态数据时，还需要进一步检测该动态数据是否超期。具体地，可检测动态数据对应的超期时间属性值的大小，当超期时间属性值不大于0时，判定目标动态数据未超期；当超期时间属性值大于0时，则基于当前时间计算目标动态数据的获取持续时长；当超期时间属性值小于持续时长时，判定目标动态数据超期；当超期时间属性值不小于持续时长时，判定目标动态数据未超期。

具体地，不同类型的动态数据被设置了不同的超期时间，电子设备可根据该动态数据的数据类型，自动配置其超期时间。超期时间的大小可根据动态数据可能产生的变动频率来设定。举例来说，分厂数据的超期时间通常相对较长，而订单数据的超期时间则相对较短。

步骤210，发起目标动态数据获取请求。

步骤212，根据获取请求检测是否存在目标动态数据。若是，则执行步骤216，否则，执行步骤214。

本实施例中，可发起http网络请求来获取目标动态数据。还可以检测该目标动态数据是否被存储在了客户端自身的存储设备内，比如是否存储在了浏览器的缓存中，若是，则指示客户端直接从其自身的存储设备中获取目标动态数据。

可根据数据标识读取插件状态中的symbol对象的内部状态，检测该内部状态中是否存在目标动态数据。

步骤214，通过目标动态数据对应的url创建目标动态数据。

可选地，除了根据url创建目标动态数据后，还可以进一步检测客户端上述会否存储有对应的目标动态数据，若存在，还可以直接获取客户端所存储的目标动态数据，从而提高目标动态数据创建的效率。

步骤216，将目标动态数据缓存至插件状态中。

可选地，可将该目标动态数据缓存至插件状态的symbol对象中，并使其保持私有化状态。

步骤218，从插件状态的symbol对象中获取目标动态数据。

步骤220，将目标动态数据加载到页面中。

上述的动态数据加载方法，通过利用vuex的状态管理容器进行目标动态数据的加载，容器中的数据是被私有化的，防止了动态数据被修改，同时通过检测动态数据是否超期，从而使得页面中加载的动态数据是有效的数据。

在一个实施例中，在步骤102之前，还包括：接收针对目标页面的访问请求；基于访问请求加载目标页面中的第一动态数据。

其中，该针对目标页面的访问请求可为打开某个页面的请求，也可为刷新该页面的请求。该请求中包含目标页面的url链接。对该访问请求的加载方式与目标动态数据的加载方式不同。该第一动态数据可为目标页面中不同于目标动态数据的基础数据。针对第一动态数据为访问目标页面时，可以默认被展示的所有基础数据的集合，其不需要主动触发针对第一动态数据的加载请求。针对第一动态数据的加载方式同样可为基于vuex的加载方式，但与目标动态数据的加载方式不同。

在一个实施例中，基于访问请求加载目标页面中的第一动态数据，包括：基于访问请求调用第一状态管理容器，遍历第一状态管理容器中与目标页面对应的所有状态数据，将该状态数据加载至目标页面中。第一状态管理容器中的数据包括目标页面中默认被展示的所有基础数据的集合。

在加载完第一状态管理容器中的所有状态数据之后，进一步检测第一状态管理容器中所加载到目标页面上的动态数据是否超期，针对超期的动态数据进行数据更新，在完成数据更新之后，将更新后的动态数据重新加载至目标页面中。

本实施例中，在访问页面的时候，直接将所有默认需要加载的数据通过状态管理容器进行加载，可以提高数据加载的效率，且不同于针对步骤102中的目标动态数据的加载需要主动触发加载请求，且在不考虑超期的情况下先对基础数据进行加载，在加载完毕之后再去校验被加载的数据是否超期，针对超期的数据获取到最新的数据后可再次加载，从而使得用户可以快速获取到自己需要的数据。

在一个实施例中，如图3所示，提供了又一种动态数据加载方法，该方法包括：

步骤302，接收针对目标页面的访问请求。

比如目标页面可为如图4中所示的某个MES系统中的采购配套报表的部分页面。该访问请求可为打开该页面的请求，或者为刷新该页面的请求。

步骤304，基于访问请求获取与目标页面对应的第一状态管理容器。

可选地，与目标页面对应的状态管理容器可包括两个，第一状态管理容器为访问请求所对应的容器，第二状态管理容器为针对目标页面中的目标动态数据的加载请求所对应的容器。第一状态管理容器中的状态数据为一次性都需要加载的第一动态数据，第二状态管理容器中的状态数据为针对目标动态数据的加载请求而针对性加载的数据。第一状态管理容器中的状态数据与第二状态管理容器中的状态数据可以具有部分重合的数据。

可选地，每个状态管理容器对应的页面可具有多个，即多个页面可共同调用相同的状态管理容器，但不同的页面默认加载的数据各不相同。这样可提高数据的共享，降低了需要创建的状态管理容器的数量，减少了开发人员的工作量。

步骤306，从第一状态管理容器中的插件状态的symbol对象中获取所有第一动态数据。

本实施例中，电子设备还可以预先创建第一状态管理容器。具体地，同样先创建配置与目标页面对应的对象数组，数组中的每一项为配置项，包括属性名称prop、请求地址、超期时间、懒加载、默认值。其中，懒加载可均为否，这样，使得在访问的时候可以立即进行数据加载。

通过vuex实例化该第一状态管理容器对象，执行插件方法，插件方法。具体的执行如下：创建插件状态pluginState。插件状态包含一个内部状态、一个派生状态、内部状态修改的方式。遍历上述的对象数组中的配置项，读取配置项的属性名称、请求地址、超期时间、懒加载等属性信息。其中，第一状态管理容器中的状态数据对应的懒加载属性可为否，使得在访问目标页面的时候，可以将第一状态管理容器中的相匹配的第一动态数据都加载至目标页面中。

根据属性名称创建symbol对象symbolProp作为私有化属性，添加到内部状态中，用来私有化保存内部状态。同时将symbol对象保存到内部的映射表中，使得可以通过属性名称获取到symbol对象。

在派生状态对象中添加prop属性。通过prop属性，可以执行通用的访问方法，能够获取到prop所对应的私有状态symbolProp。

步骤308，将第一动态数据加载至目标页面中。

本实施例中，第一动态数据可具有多个，比如第一动态数据包括图4中所示页面的左区域所展示的小机型数据。电子设备可首先忽略第一动态数据是否超期，首先将相关数据全部加载至目标页面中。

在一个实施例中，第一状态管理容器中的状态数据也会跟随时间的变化而变化，主要是会根据访问频率或者时间等参数来修改状态数据对应的懒加载属性，使得在不同的时刻所显示的默认加载的第一动态数据不同。或者直接增加或删除第一状态管理容器中的动态数据，即遍历得到的对象数组中的配置项数据也不相同。

比如在某个时刻，在目标页面中所显示的数据为图4中的左区域的2023年3月份的小机型数据，而在另一个时刻，第一状态管理容器中与目标页面中对应的状态数据是其他月份的小机型数据。

步骤310，当存在超期的第一动态数据时，针对超期的第一动态数据创建数据获取请求并缓存。

本实施例中，在完成了第一动态数据的初次加载之后，再来检测所加载的第一动态数据是否超期。具体地，可基于所设置的超期时间来进行检测。当识别到超期时，可针对第一状态管理容器中对应的超期的数据进行更新，其更新的方式与第二状态管理容器中的更新方式相似，在此不再赘述。

在一个实施例中，可按照一定的频率周期性地进行第一动态数据超期检测。

步骤312，将缓存后的第一动态数据重新加载至目标页面中。

举例来说，比如图4左区域中的第5个批次号“6013-6S1-10/79”的数据超期，可对其创建数据获取请求并缓存，比如缓存后的第5个批次号“6013-6S1-10/79”的数据与原数据相比，其对应入库率由初次加载的“73.40%”变成了“78.03%”，则可使得重新加载至目标页面中的第5个批次号“6013-6S1-10/79”的入库率为“78.03%”。

本实施例中，通过先不考虑超期时间，对第一状态管理容器中的数据进行加载，可以提高数据加载的效率，且在加载完之后再进行超期时间检测，由于超期的数据通常相对较少，且不会对整个页面的数据显示造成明显的变化，在保证了数据的准确性之后，并不会降低用户的视觉体验。此外，由于业务或者工作需要，也存在一些页面数据需要加载的第一动态数据会实时动态更新，故而对第一动态数据进行实时地超期检测，使得用户所查看到的第一动态数据始终是最新的动态数据。

步骤314，接收针对目标动态数据的加载请求。

加载请求中包含目标动态数据的数据标识。举例来说，该目标动态数据可为某个订单数据，数据标识可为订单标识。订单数据包括订单标识、订单的完成状态、订单被分配到的产线、生产期限、需求数量、生产所需要使用的物料、订单的需求客户等信息。订单标识用于唯一标识订单，其可为相应的订单编号，订单的完成状态可包括未完成、已完成、生产中等状态。可以理解地，订单数据是会定期更新，存在动态变化的情况，是一种动态数据。

页面上提供有展示相应订单数据的订单控件。终端可接收用户在所展示的页面上的操作，选择需要加载的订单数据，生成显示相应订单的加载操作指令，并将该操作指令传输给电子设备。该订单控件可为按钮、也可以为下拉菜单等控件，可选地，可通过在控件中选择具体需要加载的订单作为目标订单，从而触发该加载操作指令。目标订单即为待加载的订单。

再举例来说，如图4所示，该目标动态数据可为针对图4右上区域中的分厂数据的加载请求。比如可在该分厂数据对应的下拉控件中选择具体需要加载的分厂数据，所选择的分厂数据即为对应的目标动态数据。举例来说，可以从该下拉框中选择下料分厂、钢结构分厂、调试分厂等分厂。

步骤316，根据加载请求调用基于vuex实例化的第二状态管理容器。

步骤318，从第二状态管理容器中检测与数据标识对应的插件状态中是否存在与数据标识对应的目标动态数据。若存在，则执行步骤320。

可选地，比如选取了下料分厂，则可在第二状态管理容器检测是否存在与该下料分厂相对应的数据，若不存在，则按照上述的方法获取到与下料分厂对应的数据作为目标动态数据。

步骤320，当目标动态数据未超期时，从插件状态的symbol对象中获取目标动态数据。

具体地，是否超期的检测过程与上述相同，在此不再赘述。

步骤322，将目标动态数据加载到页面中。

同样以图4所示的页面为例，比如可将所获取到的下料分厂相对应的数据加载至如图4右下区域中。每项目标动态数据可包括序号、物料编码、物料名称、需求数量、登到数量、入库数量、差异数量、采购组等其中的一种或多种。

上述的动态数据加载方法，通过针对目标页面设置两个状态管理容器，在访问目标页面的时候，利用第一状态管理容器来主动加载默认所需的数据，并在加载之后再进行数据的更新，可以提高数据的显示效率。而当在检测到针对目标页面中的目标动态数据的加载请求时，调用第二状态管理容器来针对所需要的动态数据进行懒加载。通过两个状态管理容器的设置，降低了对系统内存的占用，而且也降低了开发人员的工作量。

在一个实施例中，如图5所示，提供了一种动态数据加载装置，包括：

加载请求获取模块502，用于接收针对目标动态数据的加载请求，加载请求中包含目标动态数据的数据标识；

动态数据获取模块504，用于根据加载请求调用基于vuex实例化的状态管理容器；从状态管理容器中检测与数据标识对应的插件状态中是否存在与数据标识对应的目标动态数据；若存在，则当目标动态数据未超期时，从插件状态的symbol对象中获取目标动态数据；

动态数据加载模块506，用于将目标动态数据加载到页面中。

在一个实施例中，如图6所示，提供了另一种动态数据加载装置，该装置还包括：

注册模块508，用于创建插件状态，插件状态包括内部状态state、派生状态getter和内部状态修改方式mutation；从预设的对象数组中读取目标动态数据的配置信息，配置信息包括动态数据的数据标识和请求地址统一资源定位符url；基于数据标识创建symbol对象，将symbol对象加载至内部状态state中，并在派生状态getter中加载数据标识属性；将插件状态注册到状态管理容器中。

在一个实施例中，插件状态还包括懒加载属性；

注册模块508还用于检测懒加载属性，当懒加载属性为真时，则在检测到对目标动态数据的获取请求时，从派生状态getter中的数据标识属性获取目标动态数据；当懒加载属性为假时，直接执行将插件状态注册到状态管理容器中。

在一个实施例中，动态数据获取模块504还用于当插件状态中不存在目标动态数据时，发起目标动态数据获取请求；根据获取请求检测是否存在目标动态数据；当不存在目标动态数据时，通过目标动态数据对应的url创建目标动态数据；将目标动态数据缓存至插件状态中。

在一个实施例中，动态数据获取模块504还用于根据插件状态中的超期时间属性检测目标动态数据是否超期；当超期时间属性值不大于0时，判定目标动态数据未超期；当超期时间属性值大于0时，基于当前时间计算目标动态数据的获取持续时长；当超期时间属性值不小于持续时长时，判定目标动态数据未超期；当超期时间属性值小于持续时长时，判定目标动态数据超期。

在一个实施例中，动态数据获取模块504还用于当目标动态数据超期时，执行发起目标动态数据获取请求，并在插件状态中缓存目标动态数据成功时，更新目标动态数据的获取时间戳。

在一个实施例中，插件状态的内部状态为私有化状态，动态数据获取模块504还用于从状态管理容器中访问与数据标识对应的插件状态的派生状态getter，检测插件状态中是否存在与数据标识对应的目标动态数据。

在一个实施例中，加载请求获取模块502还用于接收针对目标页面的访问请求。

动态数据获取模块504还用于基于访问请求获取与目标页面对应的第一状态管理容器；从第一状态管理容器中的插件状态的symbol对象中获取所有第一动态数据；当存在超期的第一动态数据时，针对超期的第一动态数据创建数据获取请求并缓存。

动态数据加载模块506还用于将第一动态数据加载至目标页面中；将缓存后的第一动态数据重新加载至目标页面中。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述各方法实施例中的步骤。

在一个实施例中，还提供了一种电子设备，包括一个或多个处理器；存储器，存储器中存储有一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器执行上述各方法实施例中的步骤。

在一个实施例中，如图7所示，其示出了用于实现本申请的实施例的电子设备的结构示意图。电子设备700包括中央处理单元（CPU）701，其可以根据存储在只读存储器（ROM）702中的程序或者从存储部分708加载到随机访问存储器（RAM）703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有电子设备700操作所需的各种程序和数据。CPU701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出（I/O）接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管（CRT）、液晶显示器（LCD）等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，包括承载指令的在计算机可读介质，在这样的实施例中，该指令可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该指令被中央处理单元（CPU）701执行时，执行本申请中描述的各个方法步骤。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本申请的范围之内并且形成不同的实施例。例如，在上面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。公开于该背景技术部分的信息仅仅旨在加深对本申请的总体背景技术的理解，而不应当被视为承认或以任何形式暗示该信息构成已为本领域技术人员所公知的现有技术。

Claims (9)

1.一种动态数据加载方法，其特征在于，所述方法包括：

接收针对目标动态数据的加载请求，所述加载请求中包含所述目标动态数据的数据标识；

根据所述加载请求调用基于vuex实例化的状态管理容器；

从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据；

若存在，则根据所述插件状态中的超期时间属性检测所述目标动态数据是否超期，当所述超期时间属性值不大于0时，判定所述目标动态数据未超期，当所述超期时间属性值大于0时，基于当前时间计算所述目标动态数据的获取持续时长，当所述超期时间属性值不小于所述持续时长时，判定所述目标动态数据未超期，当所述超期时间属性值小于所述持续时长时，判定所述目标动态数据超期；

当所述目标动态数据未超期时，从所述插件状态的symbol对象中获取所述目标动态数据；

将所述目标动态数据加载到页面中。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

创建所述插件状态，所述插件状态包括内部状态、派生状态和内部状态修改方式；

从预设的对象数组中读取所述目标动态数据的配置信息，所述配置信息包括动态数据的数据标识和请求地址统一资源定位符url；

基于所述数据标识创建所述symbol对象，将所述symbol对象加载至所述内部状态中，并在所述派生状态中加载数据标识属性；

将所述插件状态注册到所述状态管理容器中。

3.根据权利要求2所述的方法，其特征在于，所述插件状态还包括懒加载属性；

所述方法还包括：

检测所述懒加载属性，当所述懒加载属性为真时，则在检测到对所述目标动态数据的获取请求时，从所述派生状态中的数据标识属性获取所述目标动态数据；

当所述懒加载属性为假时，直接执行所述将所述插件状态注册到所述状态管理容器中。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

当所述插件状态中不存在所述目标动态数据时，发起所述目标动态数据获取请求；

根据所述获取请求检测是否存在所述目标动态数据；

当不存在所述目标动态数据时，通过所述目标动态数据对应的url创建所述目标动态数据；

将所述目标动态数据缓存至所述插件状态中。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

当所述目标动态数据超期时，执行所述发起所述目标动态数据获取请求，并在所述插件状态中缓存所述目标动态数据成功时，更新所述目标动态数据的获取时间戳。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述插件状态的内部状态为私有化状态，所述从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据，包括：

从所述状态管理容器中访问与所述数据标识对应的插件状态的派生状态，检测所述插件状态中是否存在与所述数据标识对应的所述目标动态数据。

7.一种动态数据加载装置，其特征在于，所述装置包括：

加载请求获取模块，用于接收针对目标动态数据的加载请求，所述加载请求中包含所述目标动态数据的数据标识；

动态数据获取模块，用于根据所述加载请求调用基于vuex实例化的状态管理容器；从所述状态管理容器中检测与所述数据标识对应的插件状态中是否存在与所述数据标识对应的所述目标动态数据；若存在，则根据所述插件状态中的超期时间属性检测所述目标动态数据是否超期，当所述超期时间属性值不大于0时，判定所述目标动态数据未超期，当所述超期时间属性值大于0时，基于当前时间计算所述目标动态数据的获取持续时长，当所述超期时间属性值不小于所述持续时长时，判定所述目标动态数据未超期，当所述超期时间属性值小于所述持续时长时，判定所述目标动态数据超期；当所述目标动态数据未超期时，从所述插件状态的symbol对象中获取所述目标动态数据；

动态数据加载模块，用于将所述目标动态数据加载到页面中。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有可执行指令，所述可执行指令被处理器执行时使所述处理器执行如权利要求1至6中任一项所述的方法。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如权利要求1至6中任一项所述的方法。

Images