状态数据处理方法、装置、计算机设备及存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种状态数据处理方法、装置、计算机设备及存储介质。

背景技术

vue(一种用于构建用户界面的渐进式框架)具有关注视图层、用户容易学习等特点，被越来越多地应用到前端开发中。vue中的多个vue组件共享状态，例如，多个vue组件的变量相同，变量的数据类型也相同。

为了更加方便地对vue组件进行管理，相关技术提供了一种用于状态管理的库vuex，该vuex中存储有多个vue组件的状态数据，从vuex中获取任一组件的状态数据，创建存储该状态数据的数据存储对象，则在该组件运行时，能够从数据存储对象中获取状态数据。

由于vuex是采用对象字面量的语法编写的库，存放的数据没有限制，难以指定数据的类型，导致vuex中存储的状态数据并不包括数据类型，进而导致与数据类型相关的功能缺失。

发明内容

本申请实施例提供了一种状态数据处理方法、装置、计算机设备及存储介质,能够保证一些与数据类型相关的功能的正常使用。该技术方案如下：

一方面，提供了一种状态数据处理方法，该方法包括：获取vue类组件对应的数据存储类，所述数据存储类存储有所述vue类组件的第一状态数据，所述第一状态数据包括数据类型；

将所述数据存储类实例化，得到第一数据存储对象，所述第一数据存储对象存储有所述vue类组件的第二状态数据，所述第二状态数据为第一状态数据实例化后的数据；

采用构造注入的方式，将所述第一数据存储对象注入至所述vue类组件中。

在一种可能实现方式中，所述vue类组件包括构造函数，所述采用构造注入的方式，将所述第一数据存储对象注入至所述vue类组件中，包括：

建立所述构造函数与所述第一数据存储对象的第一关联关系，以将所述第一数据存储对象注入至所述vue类组件中。

在一种可能实现方式中，所述将所述数据存储类实例化，得到第一数据存储对象，包括：

若所述vue类组件的构造函数中包括用于指示存在所述数据存储类的声明，将所述数据存储类实例化，得到所述第一数据存储对象。

在一种可能实现方式中，所述采用构造注入的方式，将所述第一数据存储对象注入至所述vue类组件中之前，所述方法还包括：

获取vue初始组件，所述vue初始组件包括采用对象字面量的语法规则表示的第一代码；

将所述vue初始组件中的第一代码进行语法转换，得到所述vue类组件，所述vue类组件包括采用类的语法规则表示的第二代码。

在一种可能实现方式中，所述获取所述vue类组件对应的数据存储类，包括：

从vuex中获取所述vue类组件的第三状态数据，所述第三状态数据采用对象字面量的语法规则表示，所述第三状态数据不包括数据类型；

获取所述第三状态数据对应的数据类型；

对所述第三状态数据进行语法转换处理，并添加所述数据类型，得到采用类的语法规则表示的所述第一状态数据；

创建包括所述第一状态数据的数据存储类。

在一种可能实现方式中，所述采用构造注入的方式，将所述第一数据存储对象注入至所述vue类组件中之后，所述方法还包括：

在运行所述vue类组件的过程中，从注入的所述第一数据存储对象中获取所述第二状态数据。

在一种可能实现方式中，所述从注入的所述第一数据存储对象中获取所述第二状态数据，包括：

响应于所述第一数据存储对象为状态管理类，从所述第一数据存储对象中获取所述第二状态数据。

在一种可能实现方式中，所述采用构造注入的方式，将所述第一数据存储对象注入至所述vue类组件中之后，所述方法还包括：

在运行所述vue类组件的过程中，建立所述第一数据存储对象与第二数据存储对象的第二关联关系，所述第二数据存储对象为基于vuex创建的、包含所述vue类组件的第三状态数据的对象。

在一种可能实现方式中，所述建立所述第一数据存储对象与第二数据存储对象的第二关联关系，包括：

响应于所述第一数据存储对象中的第一字段的属性为响应式属性，在所述第二数据存储对象中确定与所述第一字段对应的第二字段；

建立所述第一字段与所述第二字段的第二关联关系。

在一种可能实现方式中，所述建立所述第一字段与所述第二字段的第二关联关系之后，所述方法还包括：

响应于对所述第一数据存储对象的字段修改操作，对所述第一数据存储对象中的字段进行修改；

根据所述第一数据存储对象中被修改的字段、以及所述第二关联关系，修改所述第二数据存储对象中对应的字段。

在一种可能实现方式中，所述创建包括所述第一状态数据的数据存储类之后，所述方法还包括以下至少一项：

通过类装饰器将所述数据存储类标记为状态管理类；

通过属性装饰器将所述数据存储类中的至少一个字段的属性标记为响应式属性。

一方面，提供了一种状态数据处理装置，该装置包括：

第一获取模块，用于获取vue类组件对应的数据存储类，所述数据存储类存储有所述vue类组件的第一状态数据，所述第一状态数据包括数据类型；

实例化模块，用于将所述数据存储类实例化，得到第一数据存储对象，所述第一数据存储对象存储有所述vue类组件的第二状态数据，所述第二状态数据为第一状态数据实例化后的数据；

注入模块，用于采用构造注入的方式，将所述第一数据存储对象注入至所述vue类组件中。

在一种可能实现方式中，所述vue类组件包括构造函数，所述注入模块，用于建立所述构造函数与所述第一数据存储对象的第一关联关系，以将所述第一数据存储对象注入至所述vue类组件中。

在一种可能实现方式中，所述实例化模块，用于若所述vue类组件的构造函数中包括用于指示存在所述数据存储类的声明，将所述数据存储类实例化，得到所述第一数据存储对象。

在一种可能实现方式中，所述装置还包括：

第二获取模块，用于获取vue初始组件，所述vue初始组件包括采用对象字面量的语法规则表示的第一代码；

语法转换模块，用于将所述vue初始组件中的第一代码进行语法转换，得到所述vue类组件，所述vue类组件包括采用类的语法规则表示的第二代码。

在一种可能实现方式中，所述第一获取模块，包括：

数据获取单元，用于从vuex中获取所述vue类组件的第三状态数据，所述第三状态数据采用对象字面量的语法规则表示，所述第三状态数据不包括数据类型；

数据类型获取单元，用于获取所述第三状态数据对应的数据类型；

语法转换单元，用于对所述第三状态数据进行语法转换处理，并添加所述数据类型，得到采用类的语法规则表示的所述第一状态数据；

创建单元，用于创建包括所述第一状态数据的数据存储类。

在一种可能实现方式中，所述装置还包括：

第三获取模块，用于在运行所述vue类组件的过程中，从注入的所述第一数据存储对象中获取所述第二状态数据。

在一种可能实现方式中，所述第三获取模块，用于响应于所述第一数据存储对象为状态管理类，从所述第一数据存储对象中获取所述第二状态数据。

在一种可能实现方式中，所述装置还包括：

关联关系建立模块，用于在运行所述vue类组件的过程中，建立所述第一数据存储对象与第二数据存储对象的第二关联关系，所述第二数据存储对象为基于vuex创建的、包含所述vue类组件的第三状态数据的对象。

在一种可能实现方式中，所述关联关系建立模块，用于响应于所述第一数据存储对象中的第一字段的属性为响应式属性，在所述第二数据存储对象中确定与所述第一字段对应的第二字段；建立所述第一字段与所述第二字段的第二关联关系。

在一种可能实现方式中，所述装置还包括：

修改模块，用于响应于对所述第一数据存储对象的字段修改操作，对所述第一数据存储对象中的字段进行修改；

所述修改模块，还用于根据所述第一数据存储对象中被修改的字段、以及所述第二关联关系，修改所述第二数据存储对象中对应的字段。

在一种可能实现方式中，所述装置还包括以下至少一个模块：

类型标记模块，用于通过类装饰器将所述数据存储类标记为状态管理类；

属性标记模块，用于通过属性装饰器将所述数据存储类中的至少一个字段的属性标记为响应式属性。

一方面，提供了一种计算机设备，该计算机设备包括一个或多个处理器和一个或多个存储器，该一个或多个存储器中存储有至少一条指令，该至少一条指令由该一个或多个处理器加载并执行以实现如上述任一种可能实现方式的状态数据处理方法所执行的操作。

一方面，提供了一种计算机可读存储介质，该存储介质中存储有至少一条指令，该至少一条指令由处理器加载并执行以实现如上述任一种可能实现方式的状态数据处理方法所执行的操作。

一方面，提供了一种计算机程序或计算机程序产品，所述计算机程序或计算机程序产品包括：计算机指令，所述计算机指令被计算机执行时，使得所述计算机实现如上述任一种可能实现方式的状态数据处理方法所执行的操作。

本申请实施例提供的技术方案带来的有益效果至少包括：

本申请实施例提供的状态数据处理方法、装置、计算机设备及存储介质，由于数据存储类是以类的语法编写的，能够在数据存储类中存储数据类型，因此通过将包含数据类型的状态数据存储到数据存储类中，将数据存储类实例化后的数据存储对象构造注入至vue类组件中，以使vue类组件能够从数据存储对象中获取到包含数据类型的状态数据，保证了与数据类型相关的功能正常使用。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的实施环境的示意图；

图2是本申请实施例提供的一种状态数据处理方法流程图；

图3是本申请实施例提供的一种状态数据处理方法流程图；

图4是本申请实施例提供的一种状态数据处理方法流程图；

图5是本申请实施例提供的一种状态数据处理装置结构示意图；

图6是本申请实施例提供的另一种状态数据处理装置结构示意图；

图7是本申请实施例提供的终端的结构示意图；

图8是本申请实施例提供的服务器的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

可以理解，本申请所使用的术语“第一”、“第二”等可在本文中用于描述各种概念，但除非特别说明，这些概念不受这些术语限制。这些术语仅用于将一个概念与另一个概念区分。举例来说，在不脱离本申请的范围的情况下，可以将第一状态数据称为第二状态数据，且类似地，可将第二状态数据称为第一状态数据。

本申请所使用的术语“至少一个”、“多个”、“每个”、“任一”，至少一个包括一个、两个或者两个以上，多个包括两个或者两个以上，而每个是指对应的多个中的每一个，任一是指多个中的任意一个，举例来说，多个字段包括3个字段，而每个是指这3个字段中的每一个字段，任一是指这3个字段中的任意一个，可以是第一个，也可以是第二个，还可以是第三个。

本申请实施例提供的状态数据处理方法应用于计算机设备，在一种可能实现方式中，该计算机设备为台式电脑、平板电脑或者手机等任一种类型的终端。在另一种可能实现方式中，该计算机设备包括终端和服务器。

图1是本申请实施例提供的一种实施环境的示意图，如图1所示，该实施环境包括：终端101和服务器102，该终端101和服务器102通过无线连接或有线连接进行通信。

在一种可能实现方式中，终端101上安装有客户端，服务器102是为该客户端提供服务的服务器。可选地，服务器102中存储有客户端中任一vue组件的状态数据，终端101能够从服务器102中获取该vue类组件的数据存储类，或者从服务器102中获取任一vue类组件的状态数据，根据该状态数据创建数据存储类。

本申请实施例提供的状态数据处理方法能够应用于开发场景中。

例如，在开发过程中，开发人员编写了一段代码，该代码用于指示向vue组件A发送数据B，若采用本申请实施例提供的状态数据处理方法，计算机设备能够获取数据B的数据类型，并根据组件A中状态数据的数据类型，确定该数据B的数据类型是否符合vue组件A的要求，在不符合vue组件A的要求时，向开发人员发出提醒，以使开发人员及时修改该段代码，提高了代码的准确性以及开发效率。

需要说明的是，本申请实施例提供的状态数据处理方法还能够应用于对vue框架的维护场景中、修复漏洞场景中等，本申请实施例对状态数据处理方法的应用场景不做限定。

图2是本申请实施例提供的一种状态数据处理方法的流程图。参见图2，该实施例包括：

201、获取vue类组件对应的数据存储类，数据存储类存储有vue类组件的第一状态数据，第一状态数据包括数据类型。

202、将数据存储类实例化，得到第一数据存储对象，第一数据存储对象存储有vue类组件的第二状态数据，第二状态数据为第一状态数据实例化后的数据。

203、采用构造注入的方式，将第一数据存储对象注入至vue类组件中。

本申请实施例提供的状态数据处理方法，由于数据存储类是以类的语法编写的，能够在数据存储类中存储数据类型，因此通过将包含数据类型的状态数据存储到数据存储类中，将数据存储类实例化后的数据存储对象构造注入至vue类组件中，以使vue类组件能够从数据存储对象中获取到包含数据类型的状态数据，保证了与数据类型相关的功能正常使用。

在一种可能实现方式中，vue类组件包括构造函数，采用构造注入的方式，将第一数据存储对象注入至vue类组件中，包括：

建立构造函数与第一数据存储对象的第一关联关系，以将第一数据存储对象注入至vue类组件中。

在一种可能实现方式中，将数据存储类实例化，得到第一数据存储对象，包括：

若vue类组件的构造函数中包括用于指示存在数据存储类的声明，将数据存储类实例化，得到第一数据存储对象。

在一种可能实现方式中，采用构造注入的方式，将第一数据存储对象注入至vue类组件中之前，方法还包括：

获取vue初始组件，vue初始组件包括采用对象字面量的语法规则表示的第一代码；

将vue初始组件中的第一代码进行语法转换，得到vue类组件，vue类组件包括采用类的语法规则表示的第二代码。

在一种可能实现方式中，获取vue类组件对应的数据存储类，包括：

从vuex中获取vue类组件的第三状态数据，第三状态数据采用对象字面量的语法规则表示，第三状态数据不包括数据类型；

获取第三状态数据对应的数据类型；

对第三状态数据进行语法转换处理，并添加数据类型，得到采用类的语法规则表示的第一状态数据；

创建包括第一状态数据的数据存储类。

在一种可能实现方式中，采用构造注入的方式，将第一数据存储对象注入至vue类组件中之后，方法还包括：

在运行vue类组件的过程中，从注入的第一数据存储对象中获取第二状态数据。

在一种可能实现方式中，从注入的第一数据存储对象中获取第二状态数据，包括：

响应于第一数据存储对象为状态管理类，从第一数据存储对象中获取第二状态数据。

在一种可能实现方式中，采用构造注入的方式，将第一数据存储对象注入至vue类组件中之后，方法还包括：

在运行vue类组件的过程中，建立第一数据存储对象与第二数据存储对象的第二关联关系，第二数据存储对象为基于vuex创建的、包含vue类组件的第三状态数据的对象。

在一种可能实现方式中，建立第一数据存储对象与第二数据存储对象的第二关联关系，包括：

响应于第一数据存储对象中的第一字段的属性为响应式属性，在第二数据存储对象中确定与第一字段对应的第二字段；

建立第一字段与第二字段的第二关联关系。

在一种可能实现方式中，建立第一字段与第二字段的第二关联关系之后，方法还包括：

响应于对第一数据存储对象的字段修改操作，对第一数据存储对象中的字段进行修改；

根据第一数据存储对象中被修改的字段、以及第二关联关系，修改第二数据存储对象中对应的字段。

在一种可能实现方式中，创建包括第一状态数据的数据存储类之后，方法还包括以下至少一项：

通过类装饰器将数据存储类标记为状态管理类；

通过属性装饰器将数据存储类中的至少一个字段的属性标记为响应式属性。

上述所有可选技术方案，可以采用任意结合形成本申请的可选实施例，在此不再一一赘述。

图3是本申请实施例提供的一种状态数据处理方法的流程图。参见图3，该实施例包括：

301、获取vue类组件，该vue类组件包括构造函数。

vue是一种用于构建用户界面的渐进式JavaScript(一种编程语言)框架，vue组件是vue定义的抽象单元，基于vue开发的客户端能够显示至少一个页面视图，每个页面视图包括至少一个vue组件。例如，商品展示页面中包括多个商品的图片以及该多个商品的价格，其中，该多个商品的图片以及价格能够通过对应的vue组件进行显示。

其中，vue类组件是以类(class)的形式编写的vue组件，可选地，该vue类组件的形式为.class文件，该文件中承载有与vue组件相关的代码。

类在使用的时候需要实例化为一个对象才能进行使用，类一旦实例化出一个对象，该对象所对应的一些字段需要有一定的初始值，因此，类还包括构造函数，该构造函数用于为对象赋予初始值。

在一种可能实现方式中，如果开发人员在开发过程中，是以类的方式编写的vue组件，那么上述获取vue类组件即是获取开发人员编写的vue组件。如果开发人员在开发过程中，不是以类的方式编写的vue组件，那么上述获取vue组件，包括：获取vue初始组件，该vue初始组件包括采用对象字面量的语法规则表示的第一代码；将该vue初始组件中的第一代码进行语法转换，得到该vue类组件，该vue类组件包括采用类的语法规则表示的第二代码。其中，vue初始组件和vue类组件包括的信息相同，仅是采用的语法规则不同。

其中，vue初始组件即是开发人员编写的vue组件，可选地，该vue初始组件包括采用对象字面量的语法规则表示的第一代码，还包括采用类的语法规则表示的第三代码，在基于vue初始组件获取vue类组件时，仅需将vue初始组件中采用对象字面量的语法规则表示的第一代码进行语法转换，而无需对采用类的语法规则表示的第三代码进行语法转换。

可选地，将vue初始组件中的第一代码进行语法转换，得到vue类组件时，是基于语法转换工具进行的，该语法转换工具能够将采用第一语法规则表示的代码转换成采用第二语法规则表示的代码，其中，该第一语法规则和第二语法规则为计算机编程中的任一种语法规则，且第一语法规则与第二语法规则不同。

可选地，为了保证语法转换的准确性，由开发人员基于vue初始组件，重新编写该vue初始组件对应的vue类组件。可选地，由语法转换工具将该vue初始组件中的第一代码进行语法转换，得到vue类组件，再由开发人员对该vue类组件进行检查，修改该vue类组件中出现错误的代码，得到准确的vue类组件，该步骤301中获取的vue类组件为该准确的vue类组件。

可选地，采用类的语法规则表示的第二代码是指采用面向对象的语法规则表示的第二代码。

302、获取vue类组件对应的数据存储类，该数据存储类存储有vue类组件的第一状态数据，该第一状态数据包括数据类型。

不同的页面视图可能包括同一vue组件，当某一页面视图中的vue组件的状态发生改变时，另一页面视图中对应的vue组件的状态也相应发生改变。例如，第一页面视图包括多个组件，该多个组件分别用于显示苹果的展示图片、苹果价格、橘子的展示图片、橘子价格、哈密瓜的展示图片以及哈密瓜价格，第二页面视图包括多个组件，该多个组件分别用于显示苹果的展示图片、苹果价格、苹果的销量以及苹果的介绍信息。其中，第一页面视图中用于显示苹果价格的组件与第二页面视图中用于显示苹果价格的组件为同一组件，若第一页面视图中的苹果价格发生改变，第二页面视图中的苹果价格也随之改变，也即是第一页面视图中显示苹果价格的组件和第二页面视图中显示苹果价格的组件共享状态。

在一种可能实现方式中，为了便于管理，本申请实施例提供了一种用于状态管理的库，该库中存储多个vue组件的状态数据，且状态数据中包括数据类型。可选地，本申请实施例提供的用于状态管理的库为vop。

可选地，获取vue类组件对应的数据存储类，包括：从vop中获取该vue类组件的第一状态数据，创建包括该第一状态数据的数据存储类。其中，数据存储类是以类的语法规则表示的，在创建数据存储类的时候，不会丢失第一状态数据中的数据类型，这样在获取第一状态数据时，即可获取到数据类型。

例如，vue类组件为用于显示苹果价格的组件，该vue类组件的第一状态数据包括价格29.99元，数据类型为数字型。

可选地，该vop中存储的多个vue组件的状态数据为开发人员在开发过程中写入的；或者，该vop中存储的多个vue组件的状态数据是基于对应的vuex获取的。例如，开发过程中，开发人员基于vuex来辅助开发，该vuex中存储有多个vue组件的状态数据，在维护或者修复漏洞的过程中，能够基于vuex创建vop。在一种可能实现方式中，获取vop，包括：从vuex中获取多个vue组件的第三状态数据，该第三状态数据采用对象字面量的语法规则表示，且该第三状态数据不包括数据类型；获取每个第三状态数据对应的数据类型；对每个状态数据进行语法转换，并添加对应的数据类型，得到多个vue组件采用类的语法规则表示的第一状态数据；创建包括多个vue组件的第一状态数据的库。可选地，创建包括多个vue组件的第一状态数据的库是指：生成包括该多个vue组件的第一状态数据的文件。

其中，vop与vuex均是用于管理多个组件的状态的库，二者存储的数据内容基本相同，区别仅在于vop中存储有数据类型，而vuex中并未存储数据类型。

可选地，获取第三状态数据对应的数据类型，包括：通过数据类型分类工具，对第三状态数据进行分类，得到第三状态数据对应的数据类型；或者，由开发人员手动编写第三状态数据对应的数据类型。其中，第三状态数据对应的数据类型是指：第三状态数据中某些字段的数据类型。

可选地，在创建包括多个vue组件的第一状态数据的库vop之后，由开发人员对该vop进行检查和修正，以保证vop的准确性。

在一种可能实现方式中，开发过程中，采用vuex管理多个组件的状态，vuex存储有多个vue组件的第三状态数据，该第三状态数据采用对象字面量的语法规则表示，获取vue类组件对应的数据存储类，包括：从vuex中获取该vue类组件的第三状态数据，该第三状态数据采用对象字面量的语法规则表示，该第三状态数据不包括数据类型；获取该第三状态数据对应的数据类型；对该第三状态数据进行语法转换处理，并添加该数据类型，得到采用类的语法规则表示的该第一状态数据；创建包括该第一状态数据的数据存储类。可选地，创建包括该第一状态数据的数据存储类是指：生成包括该第一状态数据的类文件。

在一种可能实现方式中，vue类组件对应的数据存储类是由开发人员手动编写的，开发人员可以根据vue类组件需要显示的状态，编写第一状态数据，创建包括该第一状态数据的文件夹。

需要说明的是，由于数据存储类是用于管理vue类组件的状态，因此，可以将数据存储类标记为状态管理类，以便于该数据存储类管理vue类组件。在一种可能实现方式中，在创建包括第一状态数据的数据存储类之后，该方法还包括以下至少一项：(1)通过类装饰器将数据存储类标记为状态管理类；(2)通过属性装饰器将数据存储类中的至少一个字段的属性标记为响应式属性。

其中，响应式属性是指页面上显示的数据随着数据存储类中的数据改变，例如，苹果价格为响应式属性，如果数据存储类中的苹果价格发生了改变，则页面显示的苹果价格也要随之改变。

可选地，类装饰器为@Injectable，属性装饰器为@State。

303、将数据存储类实例化，得到第一数据存储对象，该第一数据存储对象存储有vue类组件的第二状态数据。

类是描述一种事物的定义，是个抽象的概念，在使用的时候，需要根据类的定义来创造一个具体的实例，用类的定义来创建一个实例即是类的实例化。

其中，第二状态数据为第一状态数据实例化后的数据，但是第一状态数据中与第二状态数据中的数据内容是相同的，例如，第一状态数据中定义了苹果价格为29.99元，第二状态数据依然包括苹果价格为29.99元，只是第二状态数据表示步骤301中的vue类组件对应的苹果价格，而不是其他组件对应的苹果价格。

在一种可能实现方式中，将该数据存储类实例化，得到第一数据存储对象，包括：若该构造函数中包括用于指示存在该数据存储类的声明，将该数据存储类实例化，得到该第一数据存储对象。

可选地，上述将数据存储类实例化由组件装饰器完成，该组件装饰器由vop提供，调用组件装饰器，在构造函数中包括用于指示存在该数据存储类的声明的情况下，将该数据存储类实例化，得到该第一数据存储对象。

其中，该组件装饰器为@Component，可选地，该组件装饰器通过对vue-class-component(第三方库)提供的装饰器@Component进行改造得到。

可选地，构造函数中的声明由开发人员添加。开发人员在构造函数中添加声明，告知组件装饰器存在数据存储类，以便于组件装饰器将数据存储类实例化为数据存储对象。

304、采用构造注入的方式，将第一数据存储对象注入至vue类组件中。

其中，构造注入是指在构造函数中注入所需要的依赖组件，上述步骤304中是指在vue类组件的构造函数中注入该vue类组件所依赖的数据存储对象。

在一种可能实现方式中，采用构造注入的方式，将该第一数据存储对象注入至该vue类组件中，包括：建立该构造函数与该第一数据存储对象的第一关联关系，以将该第一数据存储对象注入至该vue类组件中。

可选地，建立该构造函数与该第一数据存储对象的第一关联关系，包括：建立构造函数中任一属性与第一数据存储对象的关联关系，或者，建立构造函数中的目标属性与第一数据存储对象的关联关系。其中，目标属性为用户定义的属性。

在一种可能实现方式中，上述步骤304通过调用组件装饰器实现。通过组件装饰器将数据存储类实例化为第一数据存储对象之后，采用构造注入的方式，将第一数据存储对象注入至vue类组件中。

305、在运行vue类组件的过程中，建立第一数据存储对象与第二数据存储对象的第二关联关系。

其中，第二数据存储对象为基于vuex创建的、包含vue类组件的第三状态数据的对象，也就是说，在运行vue类组件时，本申请实施例依然采用vuex来管理vue类组件的状态，在采用vuex来管理vue类组件的基础上，还采用vop来获取状态数据的数据类型。

需要说明的是，在采用vuex来管理vue类组件的状态的基础上，页面视图中组件显示的内容与第二数据存储对象中的状态数据保持一致，也就是说，页面视图的显示内容会随着第二数据存储对象中的状态数据而改变。例如，第二数据存储对象中存储有苹果价格29.99元，页面视图中显示有苹果价格29.99元，如果将第二数据存储对象中的苹果价格29.99元修改为苹果价格19.99元，页面视图也会随之显示苹果价格19.99元。

在一种可能实现方式中，如图4所示，计算机设备基于第三方库，运行vue类组件，该第三方库用于对vue类组件的代码进行编译，运行编译后的代码以实现运行该vue类组件。

vue类组件的运行过程至少包括beforeCreate(创建前)，Created(创建)，beforeMount(安装前)以及mounted(安装)。其中，beforeCreate是指vue实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性；Created是指vue实例已经在内存中创建完成，此时data和methods已经创建完成，此时还未开始编译模板；beforeMount是指此时已经完成了模板编译，但是还没有挂载到页面中；mounted是指此时，已经将编译好的模板，挂载到了页面指定的容器中显示。

在一种可能实现方式中，在运行vue类组件的过程中，建立第一数据存储对象与第二数据存储对象的第二关联关系，包括：在beforeCreate的过程中，建立第一数据存储对象与第二数据存储对象的第二关联关系。

可选地，建立第一数据存储对象与第二数据存储对象的第二关联关系是指：建立两个对象之间的关联关系，或者，建立两个对象中一些字段之间的关联关系，或者，建立两个对象之间的关联关系，且建立两个对象中一些字段之间的关联关系。

可选地，两个对象中的一些字段为响应式属性的字段，也即是该一些字段的属性为响应式属性。在一种可能实现方式中，建立该第一数据存储对象与第二数据存储对象的第二关联关系，包括：响应于该第一数据存储对象中的第一字段的属性为响应式属性，在该第二数据存储对象中确定与该第一字段对应的第二字段；建立该第一字段与该第二字段的第二关联关系。

306、从注入的第一数据存储对象中获取第二状态数据。

vue类组件的构造函数用于为vue实例中的对象赋予初始值，且该构造函数与第一数据存储对象建立有第一关联关系，由于类装饰器将数据存储类标记为状态管理类，也即是将实例化后的第一数据存储对象标记为状态管理类，由于该第一数据存储对象为状态管理类，因此构造函数能够从该第一数据存储对象中获取第二状态数据为vue实例中的对象赋予初始值。

在一种可能实现方式中，从注入的该第一数据存储对象中获取该第二状态数据，包括：响应于该第一数据存储对象为状态管理类，从该第一数据存储对象中获取该第二状态数据。

需要说明的是，计算机设备还会从第二数据存储对象中获取第三状态数据，并根据获取的第三状态数据在页面上渲染vue类组件。

307、响应于对第一数据存储对象的修改操作，对第一数据存储对象进行修改。

其中，对第一数据存储对象的修改操作是指对第一数据存储对象中任一字段的修改操作，开发人员能够对第一数据存储对象中的任一字段进行修改操作，该修改操作包括添加操作、删除操作或者替换操作等中的至少一项。

可选地，第一数据存储对象的形式为文件夹，开发人员在第一数据存储对象的文件夹中，对该文件夹中的代码进行修改操作。

308、根据修改后的第一数据存储对象以及第二关联关系，修改第二数据存储对象。

由于页面视图中的显示内容与第二数据存储对象中的第三状态数据一致，而若仅修改第一数据存储对象，页面视图中的显示内容并不会发生改变，因此，还需修改第二数据存储对象中的第三状态数据。

但是第二数据存储对象中的state(状态)无法直接修改，需要调用相应的修改函数才能进行修改，修改操作及其复杂，因此，本申请实施例提供了一种简易快速修改第二数据存储对象的方法，通过建立第一数据存储对象中字段与第二数据存储对象中对应字段的关联关系，以快速根据第一数据存储对象中被修改的字段，对应修改第二数据存储对象中对应的字段。

在一种可能实现方式中，根据修改后的第一数据存储对象以及第二关联关系，修改第二数据存储对象，包括：根据第一数据存储对象与第二数据存储对象的关联关系，确定第二数据存储对象，根据第一数据存储对象中字段与第二数据存储对象中字段的关联关系，确定第二数据存储对象中与第一数据存储对象中被修改字段对应的字段，对应修改该第二数据存储对象中的字段。也即是，响应于对第一数据存储对象的字段修改操作，对第一数据存储对象中的字段进行修改；根据第一数据存储对象中被修改的字段、以及第二关联关系，修改第二数据存储对象中对应的字段。

这样，开发人员只需在第一数据存储对象中进行修改，即可简易快速地修改第二数据存储对象，提高了开发人员修改第二数据存储对象的效率。

需要说明的是，上述步骤301中的vue类组件为vue框架中的任一组件，而相关技术中，基于vuex对vue组件进行管理的时候，仅能创建部分组件的数据存储对象，该数据存储对象用于管理该部分组件以及该部分组件的子组件，导致数据存储对象与子组件的依赖关系不明显，若想要修改子组件的状态数据，难以找到对应的数据存储对象，也难以进行修改。而在上述实施例中，通过将第一数据存储对象构造注入至vue类组件中，使得数据存储对象与vue类组件的依赖关系明显，能够简单快速地确定第一数据存储对象，对第一数据存储对象中的状态数据进行修改。

需要说明的另一点是，本申请实施例提供的状态数据处理方法，通过在第一数据存储对象中获取第二状态数据，而第二状态数据包括数据类型，因此，在开发人员编写代码的过程中，开发工具能够根据获取的数据类型，检验开发人员编写的代码是否正确，并在检验出开发人员编写的代码不正确时，给出提醒，提高了代码开发的效率以及准确率。

需要说明的另一点是，本申请实施例提供的vop为支持typescript(一种编程语言)的vue状态管理模式，通过该vop能够实现typescript中与数据类型相关的功能。

本申请实施例提供的状态数据处理方法，由于数据存储类是以类的语法编写的，能够在数据存储类中存储数据类型，因此通过将包含数据类型的状态数据存储到数据存储类中，将数据存储类实例化后的数据存储对象构造注入至vue类组件中，以使vue类组件能够从数据存储对象中获取到包含数据类型的状态数据，保证了与数据类型相关的功能正常使用。

并且，通过将第一数据存储对象构造注入至vue类组件，使得第一数据存储对象与vue类组件的依赖关系明显，能够准确地确定vue类组件对应的数据存储对象，以便于对vue类组件对应的数据存储对象进行修改，简化了确定vue类组件所依赖数据存储对象的过程。

并且，通过建立第一数据存储对象的字段与第二数据存储对象中对应字段的关联关系，在修改第一数据存储对象中的字段时，根据该关联关系，对应修改第二数据存储对象中的字段，减轻了第二数据存储对象复杂的调用关系，能够简单快速地修改第二数据存储对象中的字段，提高了修改效率。

图5是本申请实施例提供的一种状态数据处理装置结构示意图，如图5所示，该装置包括：第一获取模块501、实例化模块502和注入模块503。

第一获取模块501，用于获取vue类组件对应的数据存储类，该数据存储类存储有该vue类组件的第一状态数据，该第一状态数据包括数据类型；

实例化模块502，用于将该数据存储类实例化，得到第一数据存储对象，该第一数据存储对象存储有该vue类组件的第二状态数据，该第二状态数据为第一状态数据实例化后的数据；

注入模块503，用于采用构造注入的方式，将该第一数据存储对象注入至该vue类组件中。

如图6所示，在一种可能实现方式中，该vue类组件包括构造函数，该注入模块503，用于建立该构造函数与该第一数据存储对象的第一关联关系，以将该第一数据存储对象注入至该vue类组件中。

在一种可能实现方式中，该实例化模块502，用于若该vue类组件的构造函数中包括用于指示存在该数据存储类的声明，将该数据存储类实例化，得到该第一数据存储对象。

在一种可能实现方式中，该装置还包括：

第二获取模块504，用于获取vue初始组件，该vue初始组件包括采用对象字面量的语法规则表示的第一代码；

语法转换模块505，用于将该vue初始组件中的第一代码进行语法转换，得到该vue类组件，该vue类组件包括采用类的语法规则表示的第二代码。

在一种可能实现方式中，该第一获取模块501，包括：

数据获取单元5011，用于从vuex中获取该vue类组件的第三状态数据，该第三状态数据采用对象字面量的语法规则表示，该第三状态数据不包括数据类型；

数据类型获取单元5012，用于获取该第三状态数据对应的数据类型；

语法转换单元5013，用于对该第三状态数据进行语法转换处理，并添加该数据类型，得到采用类的语法规则表示的该第一状态数据；

创建单元5014，用于创建包括该第一状态数据的数据存储类。

在一种可能实现方式中，该装置还包括：

第三获取模块506，用于在运行该vue类组件的过程中，从注入的该第一数据存储对象中获取该第二状态数据。

在一种可能实现方式中，该第三获取模块506，用于响应于该第一数据存储对象为状态管理类，从该第一数据存储对象中获取该第二状态数据。

在一种可能实现方式中，该装置还包括：

关联关系建立模块507，用于在运行该vue类组件的过程中，建立该第一数据存储对象与第二数据存储对象的第二关联关系，该第二数据存储对象为基于vuex创建的、包含该vue类组件的第三状态数据的对象。

在一种可能实现方式中，该关联关系建立模块507，用于响应于该第一数据存储对象中的第一字段的属性为响应式属性，在该第二数据存储对象中确定与该第一字段对应的第二字段；建立该第一字段与该第二字段的第二关联关系。

在一种可能实现方式中，该装置还包括：

修改模块508，用于响应于对该第一数据存储对象的字段修改操作，对该第一数据存储对象中的字段进行修改；

该修改模块508，还用于根据该第一数据存储对象中被修改的字段、以及该第二关联关系，修改该第二数据存储对象中对应的字段。

在一种可能实现方式中，该装置还包括以下至少一个模块：

类型标记模块509，用于通过类装饰器将该数据存储类标记为状态管理类；

属性标记模块510，用于通过属性装饰器将该数据存储类中的至少一个字段的属性标记为响应式属性。

需要说明的是：上述实施例提供的状态数据处理装置在处理状态数据时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将计算机设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的状态数据处理的装置与状态数据处理的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图7示出了本申请一个示例性实施例提供的终端700的结构框图。该终端700可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio LayerIV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端700还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

终端700包括有：处理器701和存储器702。

处理器701可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器701可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器701也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器701可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器701还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器702可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器702还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器702中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器701所执行以实现本申请中方法实施例提供的状态数据处理方法。

在一些实施例中，终端700还可选包括有：外围设备接口703和至少一个外围设备。处理器701、存储器702和外围设备接口703之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口703相连。具体地，外围设备包括：射频电路704、显示屏705、摄像头706、音频电路707、定位组件708和电源709中的至少一种。

外围设备接口703可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器701和存储器702。在一些实施例中，处理器701、存储器702和外围设备接口703被集成在同一芯片或电路板上；在一些其他实施例中，处理器701、存储器702和外围设备接口703中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路704用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路704通过电磁信号与通信网络以及其他通信设备进行通信。射频电路704将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路704包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路704可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路704还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏705用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏705是触摸显示屏时，显示屏705还具有采集在显示屏705的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器701进行处理。此时，显示屏705还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏705可以为一个，设置终端700的前面板；在另一些实施例中，显示屏705可以为至少两个，分别设置在终端700的不同表面或呈折叠设计；在再一些实施例中，显示屏705可以是柔性显示屏，设置在终端700的弯曲表面上或折叠面上。甚至，显示屏705还可以设置成非矩形的不规则图形，也即异形屏。显示屏705可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件706用于采集图像或视频。可选地，摄像头组件706包括前置摄像头和后置摄像头。前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件706还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路707可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器701进行处理，或者输入至射频电路704以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端700的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器701或射频电路704的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路707还可以包括耳机插孔。

定位组件708用于定位终端700的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件708可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。

电源709用于为终端700中的各个组件进行供电。电源709可以是交流电、直流电、一次性电池或可充电电池。当电源709包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端700还包括有一个或多个传感器710。该一个或多个传感器710包括但不限于：加速度传感器711、陀螺仪传感器712、压力传感器713、指纹传感器714、光学传感器715以及接近传感器716。

加速度传感器711可以检测以终端700建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器711可以用于检测重力加速度在三个坐标轴上的分量。处理器701可以根据加速度传感器711采集的重力加速度信号，控制触摸显示屏705以横向视图或纵向视图进行用户界面的显示。加速度传感器711还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器712可以检测终端700的机体方向及转动角度，陀螺仪传感器712可以与加速度传感器711协同采集用户对终端700的3D动作。处理器701根据陀螺仪传感器712采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器713可以设置在终端700的侧边框和/或触摸显示屏705的下层。当压力传感器713设置在终端700的侧边框时，可以检测用户对终端700的握持信号，由处理器701根据压力传感器713采集的握持信号进行左右手识别或快捷操作。当压力传感器713设置在触摸显示屏705的下层时，由处理器701根据用户对触摸显示屏705的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器714用于采集用户的指纹，由处理器701根据指纹传感器714采集到的指纹识别用户的身份，或者，由指纹传感器714根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器701授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器714可以被设置终端700的正面、背面或侧面。当终端700上设置有物理按键或厂商Logo时，指纹传感器714可以与物理按键或厂商Logo集成在一起。

光学传感器715用于采集环境光强度。在一个实施例中，处理器701可以根据光学传感器715采集的环境光强度，控制触摸显示屏705的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏705的显示亮度；当环境光强度较低时，调低触摸显示屏705的显示亮度。在另一个实施例中，处理器701还可以根据光学传感器715采集的环境光强度，动态调整摄像头组件706的拍摄参数。

接近传感器716，也称距离传感器，设置在终端700的前面板。接近传感器716用于采集用户与终端700的正面之间的距离。在一个实施例中，当接近传感器716检测到用户与终端700的正面之间的距离逐渐变小时，由处理器701控制触摸显示屏705从亮屏状态切换为息屏状态；当接近传感器716检测到用户与终端700的正面之间的距离逐渐变大时，由处理器701控制触摸显示屏705从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图7中示出的结构并不构成对终端700的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

图8是本申请实施例提供的一种服务器的结构示意图，该服务器800可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(Central ProcessingUnits，CPU)801和一个或一个以上的存储器802，其中，该存储器802中存储有至少一条指令，该至少一条指令由该处理器801加载并执行以实现上述各个方法实施例提供的方法。当然，该服务器还可以具有有线或无线网络接口、键盘以及输入输出接口等部件，以便进行输入输出，该服务器还可以包括其他用于实现设备功能的部件，在此不做赘述。

该服务器800用于执行上述方法实施例提供的状态数据处理方法。

在示例性实施例中，还提供了一种计算机可读存储介质，例如包括指令的存储器，上述指令可由计算机设备中的处理器执行以完成上述实施例中状态数据处理方法。例如，该计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括计算机指令，该计算机指令被计算机执行时，使得计算机实现上述实施例中的状态数据处理方法。

在示例性实施例中，提供了一种计算机设备，该计算机设备包括一个或多个处理器和一个或多个存储器，该一个或多个存储器中存储有至少一条指令，该至少一条指令由该一个或多个处理器加载并执行以实现如上述实施例中的状态数据处理方法。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，该程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。