Data interaction method, device and equipment of front-end data system and storage medium
By building a Vuex-based front-end data system on the client side, data operations can be processed directly on the front end, solving the problem of excessive load on the back-end server and achieving efficient, flexible data processing and fast response.
Patent Information
- Application Number
- CN202511045657.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-29
- Publication Date
- 2025-11-14
AI Technical Summary
Backend servers experience performance degradation and longer response times when processing large amounts of user data, leading to a decreased customer experience.
Build a Vuex-based front-end data system, store it on the client side, and interact with the target project through module federation. Process data operations directly on the front end, reducing dependence on the back-end server.
It improves data processing efficiency, reduces network latency, ensures data consistency and real-time performance, enhances the independence and flexibility of front-end applications, supports offline operation, and enables rapid response to market demands.
Smart Images
Figure CN120950581A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of front-end data processing technology, and in particular to a data interaction method, apparatus, device, and storage medium for a front-end data system. Background Technology
[0002] A backend server is a server system that handles the core logic of an application, data storage, and management. It is an indispensable component of modern network application architecture.
[0003] Currently, various applications on the internet typically require backend servers to handle most of the data storage and processing. However, as the number of users and the amount of data continue to increase, the load on backend servers also increases, leading to a gradual decline in their performance and a corresponding increase in response time. Summary of the Invention
[0004] This invention provides a data interaction method, apparatus, device, and storage medium for a front-end data system to solve the problem of long response times of current back-end servers.
[0005] In a first aspect, embodiments of the present invention provide a data interaction method for a front-end data system, the front-end data system being built on Vuex and stored on the client side;
[0006] Data interaction methods are applied to front-end data systems, and these methods include:
[0007] In response to an operation request from the target project, the operation request is parsed; the target project's data is stored in Vuex of the front-end data system.
[0008] Based on the obtained parsing results, determine the Vuex operation type;
[0009] The Vuex function processes the target data according to the operation type and returns the processed target data to the target project; the target data is the data of the target project stored in Vuex.
[0010] In one possible implementation, Vuex is invoked to process the target data according to the operation type, including:
[0011] Store the target data in the client's IndexedDB;
[0012] Vuex is invoked to process the target data stored in IndexedDB according to the operation type.
[0013] In one possible implementation, the operation type is adding data, deleting data, changing data, or searching data;
[0014] When the operation type is "add data", Vuex is invoked to process the target data stored in IndexedDB according to the operation type, including:
[0015] When the operation type is "add data", the add data component in Vuex is called to process the target data stored in IndexedDB;
[0016] When the operation type is delete data, the delete data component in Vuex is called to process the target data stored in IndexedDB;
[0017] When the operation type is "change data", the data change component in Vuex is called to process the target data stored in IndexedDB;
[0018] When the operation type is data lookup, the data lookup component in Vuex is invoked to process the target data stored in IndexedDB.
[0019] In one possible implementation, the data interaction method also includes:
[0020] At preset time intervals, the target data stored in Vuex is uploaded to the server.
[0021] In one possible implementation, the target data stored in Vuex is uploaded to the server at preset time intervals, including:
[0022] At preset time intervals, check whether the target data stored in Vuex has changed;
[0023] When it is determined that the target data has changed, the latest target data stored in Vuex is uploaded to the server.
[0024] In one possible implementation, the target project and the front-end data system interact with each other through module federation.
[0025] Secondly, embodiments of the present invention provide a data interaction device for a front-end data system, the front-end data system being built on Vuex and stored in the client;
[0026] The data interaction device includes:
[0027] The parsing module is used to respond to operation requests from the target project and parse the operation requests; the target project's data is stored in Vuex of the front-end data system;
[0028] The type determination module is used to determine the type of Vuex operation based on the obtained parsing results;
[0029] The data processing module is used to call Vuex to process the target data according to the operation type and return the processed target data to the target project; where the target data is the data of the target project stored in Vuex.
[0030] Thirdly, embodiments of the present invention provide an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect or any possible implementation thereof.
[0031] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect or any possible implementation thereof.
[0032] Fifthly, embodiments of the present invention provide a computer program product, including a computer program that, when executed by a processor, implements the method described in the first aspect or any possible implementation thereof.
[0033] In this embodiment of the invention, to reduce the burden on the backend server, a frontend data system built on Vuex and stored on the client side is constructed. To reduce server requests and improve response speed, the target project data is stored in the Vuex instance of the frontend data system. This allows direct manipulation of the target project data within the frontend data system, reducing reliance on the backend server. Upon receiving an operation request from the target project, the frontend data system determines the Vuex operation type based on the parsing result of the operation request. It then calls Vuex to process the target data according to the operation type. After processing the target data, the processed data is returned to the target project. This ensures that all data processing for the target project is completed within the frontend data system, eliminating the need for a server and significantly improving data processing efficiency. Furthermore, since the frontend data system is stored on the client side, even in the event of network outages or network congestion, operation requests for the target project can still proceed normally, reducing the impact of network issues on these requests. Furthermore, by implementing data storage and processing on the front end, the decoupling and flexibility of the front and back ends are promoted, making the front-end application more independent and flexible, reducing its dependence on the back end. Front-end developers can quickly iterate and test application functions without relying on the back end, and can handle data and manage the application state more autonomously. This not only speeds up development but also improves the flexibility of the development process, which helps to respond quickly to market demands and user feedback, and also facilitates integration and interoperability with different back-end systems. Attached Figure Description
[0034] Figure 1 This is a flowchart of the data interaction method of the front-end data system provided in the embodiments of the present invention;
[0035] Figure 2 This is a schematic diagram of a data interaction method for a front-end data system provided in an embodiment of the present invention;
[0036] Figure 3 This is a schematic diagram of the structure of the data interaction device of the front-end data system provided in the embodiment of the present invention;
[0037] Figure 4 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. Detailed Implementation
[0038] The embodiments of the present invention will now be described in detail with reference to the accompanying drawings.
[0039] As described in the background section, most current internet applications rely on backend servers. Backend servers design and operate databases based on business logic and the needs of frontend servers to ensure efficient data storage and retrieval. However, with the continuous increase in the number of users and data volume, the load on backend servers also increases, leading to a decline in processing capacity and longer response times, resulting in a deterioration in user experience.
[0040] To improve the customer experience, increase data loading speed, and reduce network request latency, this invention constructs a front-end data system. This front-end data system is built based on Vuex and stored on the client side.
[0041] Front-end data systems can include browser-embedded databases, front-end databases, NoSQL databases, and client-side caching. Browser-embedded databases utilize database technologies built into the browser to store data locally. Front-end databases are specifically designed for front-end development and can be created locally within the browser. Client-side caching uses client-side caching technologies to store and manage data.
[0042] See Figure 1 This document illustrates a data interaction method for a front-end data system provided in an embodiment of the present invention. This method is applied to a front-end data system built on Vuex, and the front-end data system is stored on the client side. The implementation flowchart of this data interaction method is detailed below:
[0043] S110. In response to the operation request of the target project, parse the operation request.
[0044] Before the target project can make an operation request, it needs to store its corresponding data in the front-end data system's Vuex. Vuex is the official state management library for Vue.js, used to manage shared state, i.e., global data, in Vue applications. It uses centralized storage to manage the state of all components in the application and ensures that the state is updated in a predictable way through certain rules.
[0045] Vuex enables data sharing between components, avoiding the need to pass data through props or events. Data can be modified through a strict process: Action → Mutation → State.
[0046] After receiving an operation request from the target project, the operation request needs to be parsed to determine the type of operation request.
[0047] In some embodiments, the parsing process includes receiving an operation request, which may originate from a front-end form, API call, command-line input, or message queue. Upon receiving the operation request, the operation type, parameters, etc., are extracted. After parameter validation, permission validation, and data cleaning, the operation request is parsed.
[0048] In some embodiments, the operation request for the target project can be a request to add, delete, modify, or search for data in the target project.
[0049] In some embodiments, the target project and the front-end data system interact with each other through module federation.
[0050] Modular federation is an architectural design methodology that modularizes functionalities in a distributed system and combines them in a federated manner. In modular federation, the system consists of multiple relatively autonomous modules, each responsible for handling specific functions or services. These modules can be developed and maintained by different teams, organizations, or even different technology stacks, and communicate and collaborate with each other through well-defined interfaces.
[0051] The core idea of module federation is to break down complex systems into relatively independent modules. Each module focuses on business logic in a specific domain and provides clear interfaces for other modules to use. Modules can exist in different forms, such as microservices, standalone server-side applications, libraries, or plugins. This modular design makes the system easier to extend, maintain, and update, while also providing better reusability and flexibility.
[0052] In a module federation, different modules communicate and collaborate through interfaces. These interfaces define the contracts between modules, specifying the data formats, protocols, and behaviors for requests and responses. This allows modules to be developed, evolved, and deployed independently, and to collaborate seamlessly with other modules as long as they strictly adhere to the interface conventions.
[0053] In this embodiment, each project (a functional module within the application) and the front-end data system are built using a module federation approach. In other words, each project and the front-end data system are modules within a larger system, interacting with other modules through interfaces provided by the module federation. This fundamentally implements the underlying design of the project and front-end data system architecture. Therefore, the target project and the front-end data system communicate via module federation. When the target project requires data processing from the front-end data system, it first transmits the target project's data to the Vuex instance of the front-end data system. Then, upon receiving the operation request from the target project, the front-end data system parses the request.
[0054] S120. Based on the obtained parsing results, determine the Vuex operation type.
[0055] By parsing in S110, the parsing result corresponding to the operation request can be obtained.
[0056] Since the target project's data is stored in Vuex, it is also necessary to determine the Vuex operation type based on the parsing results so that Vuex can directly process the target project's data. This allows for direct processing within the front-end data system without needing to go through the back-end server.
[0057] The parsing results include operations such as adding, deleting, modifying, or searching data for the target item.
[0058] Based on the parsed results, the Vuex operation type can be determined. The corresponding Vuex operation types are: add data, delete data, modify data, or search data.
[0059] S130. Call Vuex to process the target data according to the operation type, and return the processed target data to the target project.
[0060] In some embodiments, to avoid situations where processing cannot continue due to network outages, the front-end data system can be stored in IndexedDB on the client side. This way, even if the network is disconnected, refreshing the page will not result in the loss of data and pages.
[0061] In this embodiment, the target data can first be stored in the client's IndexedDB. Then, Vuex is invoked to process the target data stored in IndexedDB according to the operation type.
[0062] To facilitate understanding, IndexedDB will first be explained here:
[0063] IndexedDB is a browser-built-in NoSQL database system that provides a structured data storage and query interface. It can store large amounts of structured data in the user's browser. IndexedDB supports more complex data storage and query operations and can store complex data types such as objects and arrays.
[0064] IndexedDB has the following characteristics:
[0065] Structured data storage: IndexedDB can store structured data, including complex data types such as objects and arrays. Index support: IndexedDB supports creating indexes in the object storage space for fast data retrieval. Transaction support: IndexedDB supports transaction operations, ensuring data consistency and integrity. Capacity limitations: IndexedDB typically has no capacity limit, but it is limited by the user's available storage space. Security: Data in IndexedDB is private and can only be accessed and manipulated through script code.
[0066] IndexedDB can be used in various scenarios. For example, in offline scenarios, application data can be stored in IndexedDB so that users can continue using the application while offline. In scenarios involving large-volume data storage, large amounts of structured data can be stored in IndexedDB to provide fast data access and query operations. In data sharing scenarios, data can be stored in IndexedDB to share data among multiple browser tabs and windows.
[0067] In this embodiment, when the operation type is adding data, the add data component in Vuex can be called to process the target data stored in IndexedDB. When the operation type is deleting data, the delete data component in Vuex can be called to process the target data stored in IndexedDB. When the operation type is modifying data, the modify data component in Vuex can be called to process the target data stored in IndexedDB. When the operation type is searching for data, the search data component in Vuex can be called to process the target data stored in IndexedDB.
[0068] Specifically, Vuex has built-in components for processing data.
[0069] For example, you can call the Vuex action responsible for adding data to both the Vuex state and the target data in IndexedDB to complete the data addition operation.
[0070] You can call the Vuex action to invoke the deletion logic, first commit the mutation to update the state, and then synchronously delete the target data in IndexedDB to complete the deletion operation.
[0071] You can call the data change action defined in Vuex to synchronously update the target data in the Vuex state management library and the IndexedDB database, thus completing the data modification operation.
[0072] After Vuex processes the target data stored in IndexedDB, the processed data needs to be returned to the target project via module federation. This ensures that all data processing for the target project is handled within the front-end data system, eliminating reliance on back-end services. This improves data processing efficiency and the independence of the front-end system, ensuring data consistency and real-time performance. Even in the event of a network outage, the target project will not become unusable due to network interruption, guaranteeing a smoother and more immediate user experience.
[0073] In some embodiments, since the target data is stored in the client's IndexedDB, which is limited by the client's storage capacity and may be lost due to client cache clearing, device replacement, etc., it is necessary to upload the target data cached in IndexedDB to the server at preset time intervals to provide backup for the data in the front-end service system and ensure long-term data security. Furthermore, periodic data synchronization can also merge modifications from multiple front-end data systems based on timestamps or version numbers. Additionally, to ensure data integrity, although the front-end data system supports offline operations, offline modifications still need to be synchronized to the server once the network is restored to guarantee data integrity.
[0074] In this embodiment, at preset time intervals, it is determined whether the target data stored in Vuex has changed. If it is determined that the target data stored in Vuex has not changed, there is no need to upload data to the server. However, if it is determined that the target data stored in Vuex has changed, then the latest target data stored in Vuex needs to be uploaded to the server.
[0075] In some embodiments, a timestamp or version number field can be used to determine whether the target data stored in Vuex has changed.
[0076] In some embodiments, it can be determined whether the target data stored in Vuex has changed by calculating the hash value of the target data stored in Vuex.
[0077] In some embodiments, triggers can be created specifically to log changes in data changes, and the target data stored in Vuex can be determined by querying the log table.
[0078] In some embodiments, the database auditing function can be used to track changes to specific tables by configuring auditing policies to determine whether the target data stored in Vuex has changed.
[0079] For ease of understanding, Figure 2 For example, the data interaction method provided by this invention will be introduced as follows:
[0080] The front-end data system is stored on the client side and is built on Vuex.
[0081] Project A sends an operation request to the front-end data system and sends its data to the front-end data system via module federation. Upon receiving the operation request from Project A, the front-end data system, to prevent data loss due to offline operation, stores Project A's data in IndexedDB on the client side.
[0082] After parsing the received operation request, the Vuex operation type is determined based on the parsing result. The operation type can be: add data, delete data, modify data, or search data.
[0083] When the operation type is "add data," the Vuex "add data" component is invoked to process the target data stored in IndexedDB. When the operation type is "delete data," the Vuex "delete data" component is invoked to process the target data stored in IndexedDB. When the operation type is "modify data," the Vuex "modify data" component is invoked to process the target data stored in IndexedDB. When the operation type is "find data," the Vuex "find data" component is invoked to process the target data stored in IndexedDB. After processing the data for project A, it needs to be returned to project A through module federation. This allows project A to simply send its data to the front-end data system, which can then call Vuex for processing, without needing to transmit project A's data to the back-end server for processing and then returning the result to project A. This improves processing efficiency.
[0084] In addition, since the target data is stored in the client's IndexedDB, it is limited by the client's storage capacity, and the data stored in the front-end data system may be lost due to the client clearing the cache or changing devices. Therefore, it is also necessary to upload the target data cached in IndexedDB to the server at preset time intervals to provide backup for the data in the front-end service system and ensure long-term data security.
[0085] The data interaction method provided by this invention, in order to reduce the burden on the backend server, builds a frontend data system based on Vuex and stores it on the client. To reduce server requests and improve response speed, the target project data is stored in the Vuex instance of the frontend data system, allowing direct manipulation of the target project data within the frontend data system, reducing reliance on the backend server. Upon receiving an operation request from the target project, the frontend data system determines the Vuex operation type based on the parsing result of the operation request. It then calls Vuex to process the target data according to the operation type. After processing the target data, the processed target data is returned to the target project, thus enabling all data processing for the target project to be completed within the frontend data system without server dependence, significantly improving data processing efficiency. Furthermore, since the frontend data system is stored on the client, even in the event of network outages or network congestion, operation requests for the target project can still proceed normally, reducing the impact of network issues on operation requests for the target project. Furthermore, by implementing data storage and processing on the front end, the decoupling and flexibility of the front and back ends are promoted, making the front-end application more independent and flexible, reducing its dependence on the back end. Front-end developers can quickly iterate and test application functions without relying on the back end, and can handle data and manage the application state more autonomously. This not only speeds up development but also improves the flexibility of the development process, which helps to respond quickly to market demands and user feedback, and also facilitates integration and interoperability with different back-end systems.
[0086] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.
[0087] The following are device embodiments of the present invention. For details not described in detail, please refer to the corresponding method embodiments described above.
[0088] Figure 3 A schematic diagram of the data interaction device of the front-end data system provided in an embodiment of the present invention is shown. For ease of explanation, only the parts related to the embodiment of the present invention are shown, and are described in detail below:
[0089] like Figure 3 As shown, the front-end data system has a data interaction device 300. The front-end data system is built on Vuex and stored on the client side.
[0090] The data interaction device includes:
[0091] The parsing operation module 310 is used to respond to the operation request of the target project and parse the operation request; wherein, the data of the target project is stored in Vuex of the front-end data system;
[0092] The type determination module 320 is used to determine the Vuex operation type based on the obtained parsing results;
[0093] The data processing module 330 is used to call Vuex to process the target data according to the operation type and return the processed target data to the target project; where the target data is the data of the target project stored in Vuex.
[0094] In one possible implementation, the data processing module 330 is used to store the target data in the client's IndexedDB;
[0095] Vuex is invoked to process the target data stored in IndexedDB according to the operation type.
[0096] In one possible implementation, the operation type is adding data, deleting data, changing data, or searching data;
[0097] Data processing module 330 is used to call the data addition component in Vuex to process the target data stored in IndexedDB when the operation type is data addition.
[0098] When the operation type is delete data, the delete data component in Vuex is called to process the target data stored in IndexedDB;
[0099] When the operation type is "change data", the data change component in Vuex is called to process the target data stored in IndexedDB;
[0100] When the operation type is data lookup, the data lookup component in Vuex is invoked to process the target data stored in IndexedDB.
[0101] In one possible implementation, the data processing module 330 is used to upload the target data stored in Vuex to the server at preset time intervals.
[0102] In one possible implementation, the data processing module 330 is used to determine whether the target data stored in Vuex has changed at preset time intervals;
[0103] When it is determined that the target data has changed, the latest target data stored in Vuex is uploaded to the server.
[0104] In one possible implementation, the target project and the front-end data system interact with each other through module federation.
[0105] Figure 4 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. For example... Figure 4 As shown, the electronic device 4 in this embodiment includes a processor 40 and a memory 41. The memory 41 stores a computer program 42. When the processor 40 executes the computer program 42, it implements the steps in the various method embodiments described above. Alternatively, when the processor 40 executes the computer program 42, it implements the functions of each module / unit in the various device embodiments described above.
[0106] For example, computer program 42 may be divided into one or more modules / units, which are stored in memory 41 and executed by processor 40 to complete the present invention. The one or more modules / units may be a series of computer program instruction segments capable of performing a specific function, which describe the execution process of computer program 42 in electronic device 4.
[0107] Electronic device 4 may include, but is not limited to, processor 40 and memory 41. Those skilled in the art will understand that... Figure 4 This is merely an example of electronic device 4 and does not constitute a limitation on electronic device 4. It may include more or fewer components than shown, or combine certain components, or different components. For example, electronic device 4 may also include input / output devices, network access devices, buses, etc.
[0108] The processor 40 can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor.
[0109] The memory 41 can be an internal storage unit of the electronic device 4, such as a hard disk or RAM. The memory 41 can also be an external storage device of the electronic device 4, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card. Furthermore, the memory 41 can include both internal and external storage units of the electronic device 4. The memory 41 is used to store the computer program 42 and other programs and data required by the electronic device 4. The memory 41 can also be used to temporarily store data that has been output or will be output.
[0110] For the sake of simplicity and clarity, only the above-described functional modules / units are used as examples. In practical applications, the functions described above can be assigned to different functional modules / units as needed. These modules / units can be implemented in hardware, software, or a combination of both.
[0111] This invention also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the methods described in the above-described method embodiments.
[0112] This invention also provides a computer program product, including a computer program. When the computer program is executed by a processor, it implements the methods described in the above-described method embodiments.
[0113] Computer programs include computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. Computer-readable media can include: any entity or device capable of carrying computer program code, recording media, USB flash drives, portable hard drives, magnetic disks, optical disks, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc.
[0114] In the above embodiments, the descriptions of each embodiment have their own emphasis. Parts not detailed or described in a particular embodiment can be referred to in the relevant descriptions of other embodiments. Unless otherwise specified or in conflict with logic, the terminology and / or descriptions between different embodiments are consistent and can be referenced interchangeably. Technical features in different embodiments can be combined to form new embodiments based on their inherent logical relationships.
[0115] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.
Claims
1. A data interaction method for a front-end data system, characterized in that, The front-end data system is built on Vuex and stored on the client side; The data interaction method is applied to a front-end data system, and the method includes: In response to an operation request from the target project, the operation request is parsed; wherein, the target project data is stored in Vuex of the front-end data system; Based on the obtained parsing results, determine the Vuex operation type; The Vuex function is invoked to process the target data according to the operation type, and the processed target data is returned to the target project; wherein, the target data is the data of the target project stored in Vuex.
2. The data interaction method of the front-end data system according to claim 1, characterized in that, The process of calling Vuex to process the target data according to the operation type includes: The target data is stored in the client's IndexedDB; Vuex is invoked to process the target data stored in IndexedDB according to the operation type.
3. The data interaction method of the front-end data system according to claim 2, characterized in that, The operation types are adding data, deleting data, changing data, or searching data; The process of calling Vuex to process the target data stored in IndexedDB according to the operation type includes: When the operation type is "add data", the add data component in Vuex is called to process the target data stored in IndexedDB; When the operation type is delete data, the delete data component in Vuex is called to process the target data stored in IndexedDB; When the operation type is "change data", the data change component in Vuex is called to process the target data stored in IndexedDB; When the operation type is data lookup, the data lookup component in Vuex is invoked to process the target data stored in IndexedDB.
4. The data interaction method of the front-end data system according to claim 1, characterized in that, The data interaction method further includes: The target data stored in Vuex is uploaded to the server at preset time intervals.
5. The data interaction method of the front-end data system according to claim 4, characterized in that, The step of uploading the target data stored in Vuex to the server at preset time intervals includes: At preset time intervals, check whether the target data stored in Vuex has changed; When it is determined that the target data has changed, the latest target data stored in Vuex is uploaded to the server.
6. The data interaction method of the front-end data system according to any one of claims 1-5, characterized in that, The target project and the front-end data system interact through module federation.
7. A data interaction device for a front-end data system, characterized in that, The front-end data system is built on Vuex and stored on the client side; The data interaction device includes: The parsing operation module is used to parse the operation request in response to the operation request of the target project; wherein, the data of the target project is stored in Vuex of the front-end data system; The type determination module is used to determine the type of Vuex operation based on the obtained parsing results; The data processing module is used to call Vuex to process the target data according to the operation type, and return the processed target data to the target project; wherein, the target data is the data of the target project stored in Vuex.
8. The data interaction device for the front-end data system according to claim 7, characterized in that, The data processing module is used to store the target data in the client's IndexedDB; Vuex is invoked to process the target data stored in IndexedDB according to the operation type.
9. An electronic device, characterized in that, It includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the method as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the method as described in any one of claims 1 to 7.