Data migration method and device, equipment and storage medium
By configuring plugins in the Vue2 front-end framework system to obtain and broadcast dynamic data, the problem of low data migration efficiency from Vue2 to Vue3 framework system is solved, and efficient and accurate data migration is achieved.
Patent Information
- Application Number
- CN202511401250.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-09-26
- Publication Date
- 2026-01-13
AI Technical Summary
When updating from the Vue2 front-end framework system to the Vue3 front-end framework system, data transmission efficiency is low and accuracy is poor, requiring team collaboration to complete the data migration.
Configure the first Vue plugin in the Vue2 front-end framework system. This plugin can obtain browser cache data, VueX data, and page route data, and control the Vue2 front-end framework system to broadcast this data so that the Vue3 front-end framework system can receive and update the data.
It improves the efficiency and accuracy of data migration in the Vue front-end framework system, reduces reliance on team collaboration, and achieves an automated data migration process.
Smart Images
Figure CN121326883A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to a data migration method, apparatus, device, and storage medium. Background Technology
[0002] With the continuous updates and improvements in front-end technologies, the Vue front-end architecture is also constantly evolving. Vue is a progressive JavaScript framework for building user interfaces. Components are one of Vue.js's most powerful features, allowing components to extend HTML elements, encapsulate reusable code, and update specific functionalities to update the front-end page. Currently, most Vue frameworks are based on Vue 2. However, the Vue 2 front-end framework has been officially discontinued, requiring updates to the Vue 3 framework. For example, in the financial industry, financial product display pages in financial applications can be updated to Vue 3 when updating product information. Similarly, in the medical field, hospital websites often have multiple functional areas; updating these areas requires updating the data within each area to Vue 3.
[0003] Currently, when updating from a Vue2 front-end framework system to a Vue3 front-end framework system, data transmission has become an unavoidable issue. The current data transmission for front-end framework updates is generally handled manually by developers. However, this method is not only inefficient, but also requires team members to work together to ensure that the data transmission is completed, resulting in low efficiency and poor accuracy of data migration in the Vue2 front-end framework system.
[0004] Therefore, how to accurately and efficiently migrate data from the Vue2 front-end framework system to the Vue3 front-end framework system is an urgent problem to be solved. Summary of the Invention
[0005] The main purpose of this application is to provide a data migration method, apparatus, device, and storage medium, which aims to improve the efficiency and accuracy of data migration in the Vue front-end framework system.
[0006] In a first aspect, this application provides a data migration method applied to a terminal device, wherein the terminal device has a built-in Vue2 front-end framework system and a Vue3 front-end framework system, and the data migration method includes the following steps: In response to a data migration command, a first Vue plugin is configured in the Vue2 front-end framework system. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system. The first dynamic data of the Vue2 front-end framework system is obtained through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data, and page route data. The Vue2 front-end framework system is controlled to broadcast the first dynamic data, so that the Vue3 front-end framework system receives the first dynamic data and updates the data based on the first dynamic data.
[0007] Secondly, this application also provides a data migration apparatus, which includes a configuration module, an acquisition module, a broadcast module, and a data update module, wherein: The configuration module is used to configure a first Vue plugin in the Vue2 front-end framework system in response to a data migration command. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system. The acquisition module is used to acquire the first dynamic data of the Vue2 front-end framework system through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data and page routing data. The broadcast module is used to control the Vue2 front-end framework system to broadcast the first dynamic data; The data update module is used by the Vue3 front-end framework system to receive the first dynamic data and update the data based on the first dynamic data.
[0008] Thirdly, this application also provides a terminal device, the terminal device including a processor, a memory, and a computer program stored in the memory and executable by the processor, wherein when the computer program is executed by the processor, it implements the steps of the data migration method described above.
[0009] Fourthly, this application also provides a computer-readable storage medium storing a computer program, wherein when the computer program is executed by a processor, it implements the steps of the data migration method described above.
[0010] This application provides a data migration method, apparatus, device, and storage medium. Responding to a data migration instruction, this application configures a first Vue plugin in a Vue2 front-end framework system; obtains first dynamic data from the Vue2 front-end framework system through the first Vue plugin, the first dynamic data including browser cache data, first VueX data, and page routing data; and controls the Vue2 front-end framework system to broadcast the first dynamic data, enabling the Vue3 front-end framework system to receive the first dynamic data and update its data based on it. By configuring a first Vue plugin in the Vue2 front-end framework system, this application enables the browsing and acquisition of dynamic data within the Vue2 front-end framework system, thereby achieving the acquisition of the first dynamic data. Broadcasting this first dynamic data allows the Vue3 front-end framework system to accurately receive it and update its data based on it, thus completing the data migration and significantly improving the efficiency and accuracy of data migration in the Vue front-end framework system. Attached Figure Description
[0011] To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0012] Figure 1 A flowchart illustrating a data migration method provided in an embodiment of this application; Figure 2 for Figure 1 A flowchart illustrating the sub-steps of the data migration method in [the context of the data migration process]. Figure 3 A flowchart illustrating another data migration method provided in an embodiment of this application; Figure 4 A schematic block diagram of a data migration apparatus provided in an embodiment of this application; Figure 5 for Figure 4 A schematic block diagram of a submodule of the data migration device in the diagram; Figure 6 This is a schematic block diagram of the structure of a terminal device provided in an embodiment of this application.
[0013] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation
[0014] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0015] The flowchart shown in the attached diagram is for illustrative purposes only and does not necessarily include all content and operations / steps, nor does it necessarily have to be performed in the order described. For example, some operations / steps can be broken down, combined, or partially merged, so the actual execution order may change depending on the actual situation.
[0016] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.
[0017] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.
[0018] With the continuous updates and improvements in front-end technologies, the Vue front-end architecture is also constantly evolving. Vue is a progressive JavaScript framework for building user interfaces. Components are one of Vue.js's most powerful features, allowing components to extend HTML elements, encapsulate reusable code, and update specific functionalities to update the front-end page. Currently, most Vue frameworks are based on Vue 2. However, the Vue 2 front-end framework has been officially discontinued, requiring updates to the Vue 3 framework. For example, in the financial industry, financial product display pages in financial applications can be updated to Vue 3 when updating product information. Similarly, in the medical field, hospital websites often have multiple functional areas; updating these areas requires updating the data within each area to Vue 3.
[0019] Currently, when updating from a Vue2 front-end framework system to a Vue3 front-end framework system, data transmission has become an unavoidable issue. The current data transmission for front-end framework updates is generally handled manually by developers. However, this method is not only inefficient, but also requires team members to work together to ensure that the data transmission is completed, resulting in low efficiency and poor accuracy of data migration in the Vue2 front-end framework system.
[0020] To address the aforementioned issues, embodiments of this application provide a data migration method, apparatus, device, and storage medium. The data migration method includes configuring a first Vue plugin in the Vue2 front-end framework system in response to a data migration instruction; obtaining first dynamic data from the Vue2 front-end framework system through the first Vue plugin, the first dynamic data including browser cache data, first VueX data, and page routing data; controlling the Vue2 front-end framework system to broadcast the first dynamic data, causing the Vue3 front-end framework system to receive the first dynamic data and update its data based on the first dynamic data.
[0021] This data migration method can be applied to terminal devices, such as mobile phones, tablets, laptops, desktop computers, personal digital assistants, and wearable devices.
[0022] The following detailed description of some embodiments of this application is provided in conjunction with the accompanying drawings. Unless otherwise specified, the following embodiments and features can be combined with each other.
[0023] Please refer to Figure 1 , Figure 1 This is a flowchart illustrating a data migration method provided in an embodiment of this application.
[0024] like Figure 1 As shown, the data migration method includes steps S101 to S103.
[0025] Step S101: In response to the data migration instruction, configure a first Vue plugin in the Vue2 front-end framework system. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system.
[0026] The data migration method is applied to a terminal device that has a built-in Vue front-end framework system. The Vue front-end framework system is used to build the user interface and interaction logic. The Vue front-end framework system includes the Vue2 front-end framework system and the Vue3 front-end framework system. The Vue2 front-end framework system is the old version of the Vue front-end framework system, and the Vue3 front-end framework system is the new version of the Vue front-end framework system.
[0027] In some embodiments, a Vue 3 front-end framework system is deployed on a terminal device, and a data migration instruction is automatically generated. This instruction instructs the terminal device to migrate data from the Vue 2 front-end framework system to the Vue 3 front-end framework system. By automatically generating the data migration instruction, data migration can be performed in a timely manner, thereby effectively completing the update of the Vue front-end framework system.
[0028] In some embodiments, a data migration command triggered by a staff member is obtained, and a data migration instruction is generated based on the data migration command. The method by which the staff member triggers the data migration command can be configured according to actual circumstances, and this application embodiment does not impose specific limitations on this. For example, the staff member may control the terminal device to generate the data migration command via voice data, or the staff member may generate the data migration command by touching a preset button on the terminal device. By obtaining the data migration command triggered by the staff member and generating a data migration instruction based on the data migration command, the flexibility of data migration is greatly improved.
[0029] In some embodiments, upon receiving a data migration instruction, a first Vue plugin is configured in the Vue2 front-end framework system according to the instruction. This first Vue plugin is capable of browsing and retrieving dynamic data from the Vue2 front-end framework system. The first Vue plugin is a function encapsulated within a package, including a data extraction function. This function can be selected based on actual needs, and this embodiment does not impose specific limitations on it. By configuring the first Vue plugin in the Vue2 front-end framework system, the efficiency and accuracy of data migration can be effectively improved.
[0030] For example, a financial application is installed on a terminal device, which has a built-in Vue2 front-end framework system. When a Vue3 front-end framework system is deployed in the financial application, a data migration instruction is generated, and in response to the data migration instruction, a first Vue plugin is configured in the Vue2 front-end framework system.
[0031] Step S102: Obtain the first dynamic data of the Vue2 front-end framework system through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data, and page route data.
[0032] The first dynamic data includes browser cache data, first VueX data, and page routing data. The browser cache data is the data cached by the browser during runtime. The first VueX data is common management data in the Vue2 front-end framework system. The page routing data is the routing data in the page routing table.
[0033] In some embodiments, such as Figure 2As shown, step S102 includes sub-steps S1021 to S1023.
[0034] Sub-step S1021: Access the browser's storage area through the first Vue plugin to obtain the browser's cached data.
[0035] The browser cache data includes local cache data, session storage data, and network storage data. The local cache data is data stored locally during application runtime, the session storage data is session data generated during application sessions, and the network storage data is data generated by network interactions during application runtime.
[0036] In some embodiments, the browser's local data storage space is accessed through the first Vue plugin to obtain local cached data; the browser's session data storage space is accessed through the first Vue plugin to obtain session stored data; and the browser's network data storage space is accessed through the first Vue plugin to obtain network stored data. By accessing the browser's local data storage space, session data storage space, and network data storage space, local cached data, session stored data, and network stored data can be accurately obtained, thereby acquiring the first dynamic data of the Vue2 front-end framework system.
[0037] For example, in a financial application, the first Vue plugin accesses the browser's local data storage space for the financial product to obtain local cached data; the first Vue plugin accesses the browser's session data storage space for the financial product to obtain session stored data; and the first Vue plugin accesses the browser's network data storage space for the financial product to obtain network stored data.
[0038] Sub-step S1022: Call the VueX of the Vue2 front-end framework system through the first Vue plugin to obtain the first VueX data of the Vue2 front-end framework system.
[0039] Among them, VueX in the Vue2 front-end framework system is the shared state data of the components in the Vue2 front-end framework system.
[0040] In some embodiments, the first Vue plugin calls the VueX of the Vue2 front-end framework system, so that the VueX obtains the VueX data of the Vue2 front-end framework system based on a preset access algorithm, thus obtaining the first VueX data. The preset access algorithm can be selected according to actual conditions, and this application embodiment does not specifically limit it. For example, the preset access algorithm can be a getter algorithm.
[0041] Sub-step S1023: Call the browser's built-in route object through the first Vue plugin to obtain the page route data of the Vue2 front-end framework system.
[0042] The route object is the route object in the routing table.
[0043] In some embodiments, the browser's built-in route object is invoked through the first Vue plugin, and the page route data is retrieved from the route table based on the route object to obtain the page route data of the Vue2 front-end framework system. This first Vue plugin can accurately obtain the page route data of the Vue2 front-end framework system, greatly improving the accuracy of data migration.
[0044] Step S103: Control the Vue2 front-end framework system to broadcast the first dynamic data, so that the Vue3 front-end framework system receives the first dynamic data and updates the data based on the first dynamic data.
[0045] The Vue2 front-end framework system has a broadcast function, which can broadcast the first dynamic data; the Vue3 front-end framework system has a listening function, which is used to listen for the dynamic data broadcast by the Vue2 front-end framework system.
[0046] In some embodiments, the Vue2 front-end framework system is controlled to broadcast first dynamic data. By controlling the Vue2 front-end framework system to broadcast the first dynamic data, the Vue2 front-end framework system can accurately transmit the data to be migrated, greatly improving the efficiency of data migration.
[0047] In some embodiments, the Vue3 front-end framework system listens for and receives the first dynamic data broadcast by the Vue2 front-end framework system, and updates its data based on this first dynamic data. By receiving the first dynamic data broadcast by the Vue2 front-end framework system and updating its data accordingly, the data migration is accurately completed.
[0048] In some embodiments, updating data based on the first dynamic data can be achieved by updating the data of dynamic data items with the same name in the same system according to the data of each dynamic data item in the first dynamic data. Updating the data of dynamic data items with the same name in the Vue3 front-end framework system based on the data of each dynamic data item in the first dynamic data can accurately complete the data migration.
[0049] It should be noted that the data item names of the same data items in the Vue 2 front-end framework system and the Vue 3 front-end framework system are the same. For example, the Vue 2 front-end framework system includes data item 1, data item 2, and data item 3; the Vue 3 front-end framework system also includes data item 1, data item 2, and data item 3. Specifically, data item 1 in the Vue 2 front-end framework system and data item 1 in the Vue 3 front-end framework system have the same and corresponding data item names; data item 2 in the Vue 2 front-end framework system and data item 2 in the Vue 3 front-end framework system have the same and corresponding data item names; and data item 3 in the Vue 2 front-end framework system and data item 3 in the Vue 3 front-end framework system have the same and corresponding data item names.
[0050] The data migration method provided in the above embodiments, in response to a data migration instruction, configures a first Vue plugin in the Vue2 front-end framework system; obtains first dynamic data of the Vue2 front-end framework system through the first Vue plugin, the first dynamic data including browser cache data, first VueX data, and page routing data; and controls the Vue2 front-end framework system to broadcast the first dynamic data, enabling the Vue3 front-end framework system to receive the first dynamic data and update its data based on the first dynamic data. In this application, by configuring a first Vue plugin in the Vue2 front-end framework system, the first dynamic data of the Vue2 front-end framework system can be accurately obtained through the first Vue plugin; and by broadcasting the first dynamic data, the Vue3 front-end framework system can accurately receive the first dynamic data and update its data based on the first dynamic data, thereby completing the data migration and greatly improving the efficiency and accuracy of data migration in the Vue front-end framework system.
[0051] Please see Figure 3 , Figure 3 This is a flowchart illustrating another data migration method provided in an embodiment of this application.
[0052] like Figure 3 As shown, the data migration method includes steps S201 to S203.
[0053] Step S201: In response to changes in running data in the Vue3 front-end framework system, configure a second Vue plugin in the Vue3 front-end framework system. The second Vue plugin is used to obtain dynamic data in the Vue3 front-end framework system.
[0054] Specifically, the change in runtime data within the Vue3 front-end framework system refers to the changes that occur when the Vue3 front-end framework system is in operation. The nature of these changes can be determined based on actual circumstances, and this embodiment does not impose specific limitations. For example, a worker might modify local data within the Vue3 front-end framework system, thereby triggering a data change within the Vue3 front-end framework system.
[0055] In some embodiments, when data changes within the Vue3 front-end framework system, a second Vue plugin is configured within the Vue3 front-end framework system. This second Vue plugin is capable of browsing and retrieving dynamic data from the Vue3 front-end framework system. The second Vue plugin is a function encapsulated within a package, including a data extraction function. This function can be selected based on actual needs, and this embodiment does not impose specific limitations on it. By configuring a second Vue plugin within the Vue2 front-end framework system, the Vue2 front-end framework system can easily detect whether data in the Vue3 front-end framework system has changed.
[0056] Step S202: Obtain the second dynamic data of the Vue3 front-end framework system through the second Vue plugin. The second dynamic data includes browser cache data, second VueX data, and page routing data.
[0057] The second dynamic data includes browser cache data, second VueX data, and page routing data. The browser cache data is the data cached by the browser during runtime. The second VueX data is the common management data in the Vue3 front-end framework system. The page routing data is the routing data in the page routing table.
[0058] In some embodiments, the browser's storage area is accessed through a second Vue plugin to obtain browser cached data; the VueX of the Vue3 front-end framework system is invoked through the second Vue plugin to obtain second VueX data of the Vue3 front-end framework system; and the browser's built-in route object is invoked through the second Vue plugin to obtain page route data of the Vue3 front-end framework system. This second Vue plugin enables accurate acquisition of the second dynamic data of the Vue3 front-end framework system.
[0059] The browser cache data includes local cache data, session storage data, and network storage data. The local cache data is data stored locally during application runtime, the session storage data is session data generated during application sessions, and the network storage data is data generated by network interactions during application runtime.
[0060] In some embodiments, accessing the browser's storage areas through the second Vue plugin to obtain browser cached data can be achieved by: accessing the browser's local data storage space through the second Vue plugin to obtain local cached data; accessing the browser's session data storage space through the second Vue plugin to obtain session stored data; and accessing the browser's network data storage space through the second Vue plugin to obtain network stored data. By accessing the browser's local data storage space, session data storage space, and network data storage space, local cached data, session stored data, and network stored data can be accurately obtained, thereby acquiring the second dynamic data of the Vue3 front-end framework system.
[0061] In some embodiments, the second Vue plugin calls the VueX of the Vue3 front-end framework system, so that the VueX obtains the VueX data of the Vue3 front-end framework system based on a preset access algorithm, thereby obtaining the second VueX data. The preset access algorithm can be selected according to actual conditions, and this application embodiment does not specifically limit it. For example, the preset access algorithm can be a getter algorithm.
[0062] In some embodiments, the browser's built-in route object is invoked through a second Vue plugin. Based on this route object, the page route data is retrieved from the route table to obtain the page route data of the Vue3 front-end framework system. This second Vue plugin enables accurate retrieval of the Vue3 front-end framework system's page route data, significantly improving the accuracy of data migration.
[0063] Step S203: Broadcast the second dynamic data so that the Vue2 front-end framework system receives the second dynamic data and updates the data based on the second dynamic data.
[0064] The Vue3 front-end framework system has a broadcast function, which can broadcast second dynamic data; the Vue2 front-end framework system has a listening function, which is used to listen for the dynamic data broadcast by the Vue3 front-end framework system.
[0065] In some embodiments, the Vue3 front-end framework system is controlled to broadcast second dynamic data. By controlling the Vue3 front-end framework system to broadcast the second dynamic data, the Vue3 front-end framework system can accurately transmit the updated data, greatly improving the efficiency of data migration.
[0066] In some embodiments, when the Vue2 front-end framework system detects second dynamic data broadcast by the Vue3 front-end framework system, it updates the first dynamic data based on the second dynamic data. This second dynamic data is runtime dynamic data broadcast by the Vue3 front-end framework system when data changes. The Vue2 front-end framework system synchronizes its data by listening to the second dynamic data broadcast by the Vue3 front-end framework system.
[0067] In some embodiments, the method for synchronizing data based on the second dynamic data can be: updating the data of dynamic data items in the first dynamic data that have the same name as those in the second dynamic data based on the data of each dynamic data item in the second dynamic data.
[0068] By setting the names of data items to be the same in both the Vue2 and Vue3 front-end framework systems, the efficiency and accuracy of data migration between the two systems can be improved, and only one global field name needs to be used, which greatly reduces field pollution.
[0069] For example, the display page of a hospital website includes multiple functional areas. When updating the Vue2 front-end framework system of the login interface, a first Vue plugin is configured in the Vue2 front-end framework system corresponding to the login interface; the first dynamic data of the Vue2 front-end framework system is obtained through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data, and page routing data; the Vue2 front-end framework system is controlled to broadcast the first dynamic data, so that the Vue3 front-end framework system receives the first dynamic data and updates the data in the Vue3 front-end framework system corresponding to the login interface based on the first dynamic data to complete the data migration.
[0070] The data migration method in the above embodiments, in response to changes in running data in the Vue3 front-end framework system, configures a second Vue plugin in the Vue3 front-end framework system; obtains second dynamic data from the Vue3 front-end framework system through the second Vue plugin, the second dynamic data including browser cache data, second VueX data, and page routing data; broadcasts the second dynamic data so that the Vue2 front-end framework system receives the second dynamic data and updates its data based on the second dynamic data. This embodiment can accurately synchronize data between the Vue2 and Vue3 front-end framework systems.
[0071] Please see Figure 4 , Figure 4 This is a schematic block diagram of a data migration device provided in an embodiment of this application.
[0072] like Figure 4As shown, the data migration device 300 includes a configuration module 310, an acquisition module 320, a broadcast module 330, and a data update module 340, wherein: The configuration module 310 is used to configure a first Vue plugin in the Vue2 front-end framework system in response to a data migration instruction. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system. The acquisition module 320 is used to acquire the first dynamic data of the Vue2 front-end framework system through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data and page routing data. The broadcast module 330 is used to control the Vue2 front-end framework system to broadcast the first dynamic data; The data update module 340 is used by the Vue3 front-end framework system to receive the first dynamic data and update the data based on the first dynamic data.
[0073] In some embodiments, such as Figure 5 As shown, the acquisition module 320 includes a first acquisition submodule 321, a second acquisition submodule 322, and a third acquisition submodule 323, wherein: The first acquisition submodule 321 is used to access the browser's storage area through the first Vue plugin to obtain the browser's cached data; The second acquisition submodule 322 is used to call the VueX of the Vue2 front-end framework system through the first Vue plugin to obtain the first VueX data of the Vue2 front-end framework system; The third acquisition submodule 323 is used to call the browser's built-in route object through the first Vue plugin to obtain the page route data of the Vue2 front-end framework system.
[0074] In some embodiments, the first acquisition submodule 321 is further configured to: The browser's local data storage space is accessed through the first Vue plugin to obtain local cached data; The session storage data is obtained by accessing the browser's session data storage space through the first Vue plugin; The network storage data is obtained by accessing the browser's network data storage space through the first Vue plugin.
[0075] In some embodiments, the data update module 340 is further configured to: Based on the data of each dynamic data item in the first dynamic data, update the data of dynamic data items with the same name in its own system.
[0076] In some embodiments, the data migration apparatus 300 is further configured to: In response to changes in running data in the Vue3 front-end framework system, a second Vue plugin is configured in the Vue3 front-end framework system. The second Vue plugin is used to obtain dynamic data in the Vue3 front-end framework system. The second dynamic data of the Vue3 front-end framework system is obtained through the second Vue plugin. The second dynamic data includes browser cache data, second VueX data, and page route data. The second dynamic data is broadcast so that the Vue2 front-end framework system receives the second dynamic data and updates the data based on the second dynamic data.
[0077] In some embodiments, the data migration apparatus 300 is further configured to: When the second dynamic data broadcast by the Vue3 front-end framework system is detected, the first dynamic data is updated according to the second dynamic data. The second dynamic data is the runtime dynamic data broadcast when the data in the Vue3 front-end framework system changes.
[0078] In some embodiments, the data migration apparatus 300 is further configured to: Based on the data of each dynamic data item in the second dynamic data, update the data of the dynamic data items in the first dynamic data that have the same name as those in the second dynamic data.
[0079] It should be noted that those skilled in the art will understand that, for the sake of convenience and brevity, the specific working process of the above-mentioned data migration device can be referred to the corresponding process in the aforementioned data migration method embodiments, and will not be repeated here.
[0080] Please see Figure 6 , Figure 6 This is a schematic block diagram of the structure of a terminal device provided in an embodiment of this application.
[0081] like Figure 6 As shown, the terminal device 400 includes a processor 402 and a memory 403 connected via a system bus 401, wherein the memory 403 may include a storage medium and internal memory.
[0082] The storage medium may store the operating system and computer programs. The computer programs include program instructions that, when executed, cause the processor to perform any data migration method.
[0083] The processor 402 provides computing and control capabilities to support the operation of the entire terminal device.
[0084] Internal memory provides an environment for the execution of computer programs stored in storage media. When these computer programs are executed by the processor, the processor can perform any data migration method.
[0085] Those skilled in the art will understand that Figure 6 The structure shown is merely a block diagram of a portion of the structure related to the solution of this application and does not constitute a limitation on the terminal device to which the solution of this application is applied. A specific terminal device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.
[0086] It should be understood that processor 402 can be a Central Processing Unit (CPU), but it can also be 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. Among these, general-purpose processor 402 can be a microprocessor or any conventional processor.
[0087] In one embodiment, the processor 402 is configured to run a computer program stored in a memory to perform the following steps: In response to a data migration command, a first Vue plugin is configured in the Vue2 front-end framework system. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system. The first dynamic data of the Vue2 front-end framework system is obtained through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data, and page route data. The Vue2 front-end framework system is controlled to broadcast the first dynamic data, so that the Vue3 front-end framework system receives the first dynamic data and updates the data based on the first dynamic data.
[0088] In one embodiment, when the processor 402 obtains the first dynamic data of the Vue2 front-end framework system through the first Vue plugin, it is configured to: Access the browser's storage area through the first Vue plugin to obtain the browser's cached data; The first Vue plugin calls the VueX of the Vue2 front-end framework system to obtain the first VueX data of the Vue2 front-end framework system. The first Vue plugin calls the browser's built-in route object to obtain the page route data of the Vue2 front-end framework system.
[0089] In one embodiment, when the processor 402 accesses the browser's storage area via the first Vue plugin to obtain the browser's cached data, it is configured to: The browser's local data storage space is accessed through the first Vue plugin to obtain local cached data; The session storage data is obtained by accessing the browser's session data storage space through the first Vue plugin; The network storage data is obtained by accessing the browser's network data storage space through the first Vue plugin.
[0090] In one embodiment, when implementing the data update based on the first dynamic data, the processor 402 is configured to: Based on the data of each dynamic data item in the first dynamic data, update the data of dynamic data items with the same name in its own system.
[0091] In one embodiment, the processor 402 is further configured to implement: In response to changes in running data in the Vue3 front-end framework system, a second Vue plugin is configured in the Vue3 front-end framework system. The second Vue plugin is used to obtain dynamic data in the Vue3 front-end framework system. The second dynamic data of the Vue3 front-end framework system is obtained through the second Vue plugin. The second dynamic data includes browser cache data, second VueX data, and page route data. The second dynamic data is broadcast so that the Vue2 front-end framework system receives the second dynamic data and updates the data based on the second dynamic data.
[0092] In one embodiment, the processor 402 is further configured to implement: When the second dynamic data broadcast by the Vue3 front-end framework system is detected, the first dynamic data is updated according to the second dynamic data. The second dynamic data is the runtime dynamic data broadcast when the data in the Vue3 front-end framework system changes.
[0093] In one embodiment, when the processor 402 updates the first dynamic data according to the second dynamic data, it is configured to: Based on the data of each dynamic data item in the second dynamic data, update the data of the dynamic data items in the first dynamic data that have the same name as those in the second dynamic data.
[0094] It should be noted that those skilled in the art will understand that, for the sake of convenience and brevity, the specific working process of the terminal device described above can be referred to the corresponding process in the aforementioned data migration method embodiments, and will not be repeated here.
[0095] This application also provides a computer-readable storage medium storing a computer program, the computer program including program instructions, and the method implemented when the program instructions are executed can be referred to various embodiments of the data migration method of this application.
[0096] The computer-readable storage medium can be an internal storage unit of the terminal device described in the foregoing embodiments, such as the hard disk or memory of the terminal device. The computer-readable storage medium can be non-volatile or volatile. Alternatively, the computer-readable storage medium can be an external storage device of the terminal device, such as a plug-in hard disk, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card equipped on the terminal device.
[0097] Furthermore, the computer-readable storage medium may primarily include a program storage area and a data storage area, wherein the program storage area may store the operating system, at least one application required for a function, etc.; and the data storage area may store data created based on the use of blockchain nodes, etc.
[0098] The blockchain referred to in this invention is a novel application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Essentially, a blockchain is a decentralized database, a chain of data blocks linked together using cryptographic methods. Each data block contains information about a batch of network transactions, used to verify the validity of the information (anti-counterfeiting) and generate the next block. A blockchain can include an underlying blockchain platform, a platform product service layer, and an application service layer.
[0099] It should be understood that the terminology used in this specification is for the purpose of describing particular embodiments only and is not intended to limit the scope of the application. As used in this specification, unless the context clearly indicates otherwise, the singular forms “a,” “an,” and “the” are intended to include the plural forms.
[0100] It should also be understood that the term "and / or" as used in this specification refers to any combination and all possible combinations of one or more of the associated listed items, and includes such combinations. It should be noted that, herein, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or system. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or system that includes that element.
[0101] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments. The above descriptions are merely specific implementations of this application, but the protection scope of this application is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in this application, and these modifications or substitutions should all be covered within the protection scope of this application.
Claims
1. A data migration method, characterized in that, The method is applied to a terminal device, which has a built-in Vue2 and Vue3 front-end framework system. The method includes: In response to a data migration command, a first Vue plugin is configured in the Vue2 front-end framework system. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system. The first dynamic data of the Vue2 front-end framework system is obtained through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data, and page route data. The Vue2 front-end framework system is controlled to broadcast the first dynamic data, so that the Vue3 front-end framework system receives the first dynamic data and updates the data based on the first dynamic data.
2. The data migration method as described in claim 1, characterized in that, The step of obtaining the first dynamic data of the Vue2 front-end framework system through the first Vue plugin includes: Access the browser's storage area through the first Vue plugin to obtain the browser's cached data; The first Vue plugin calls the VueX of the Vue2 front-end framework system to obtain the first VueX data of the Vue2 front-end framework system. The first Vue plugin calls the browser's built-in route object to obtain the page route data of the Vue2 front-end framework system.
3. The data migration method as described in claim 2, characterized in that, The step of accessing the browser's storage area through the first Vue plugin to obtain the browser's cached data includes: The browser's local data storage space is accessed through the first Vue plugin to obtain local cached data; The session storage data is obtained by accessing the browser's session data storage space through the first Vue plugin; The network storage data is obtained by accessing the browser's network data storage space through the first Vue plugin.
4. The data migration method as described in claim 1, characterized in that, The data update based on the first dynamic data includes: Based on the data of each dynamic data item in the first dynamic data, update the data of dynamic data items with the same name in its own system.
5. The data migration method as described in claim 1, characterized in that, The method further includes: In response to changes in running data in the Vue3 front-end framework system, a second Vue plugin is configured in the Vue3 front-end framework system. The second Vue plugin is used to obtain dynamic data in the Vue3 front-end framework system. The second dynamic data of the Vue3 front-end framework system is obtained through the second Vue plugin. The second dynamic data includes browser cache data, second VueX data, and page route data. The second dynamic data is broadcast so that the Vue2 front-end framework system receives the second dynamic data and updates the data based on the second dynamic data.
6. The data migration method as described in claim 5, characterized in that, The method further includes: When the second dynamic data broadcast by the Vue3 front-end framework system is detected, the first dynamic data is updated according to the second dynamic data. The second dynamic data is the runtime dynamic data broadcast when the data in the Vue3 front-end framework system changes.
7. The data migration method as described in claim 6, characterized in that, The step of updating the first dynamic data based on the second dynamic data includes: Based on the data of each dynamic data item in the second dynamic data, update the data of the dynamic data items in the first dynamic data that have the same name as those in the second dynamic data.
8. A data migration device, characterized in that, The data migration device includes a configuration module, an acquisition module, a broadcast module, and a data update module, wherein: The configuration module is used to configure a first Vue plugin in the Vue2 front-end framework system in response to a data migration command. The first Vue plugin is used to obtain dynamic data in the Vue2 front-end framework system. The acquisition module is used to acquire the first dynamic data of the Vue2 front-end framework system through the first Vue plugin. The first dynamic data includes browser cache data, first VueX data and page routing data. The broadcast module is used to control the Vue2 front-end framework system to broadcast the first dynamic data; The data update module is used by the Vue3 front-end framework system to receive the first dynamic data and update the data based on the first dynamic data.
9. A terminal device, characterized in that, The terminal device includes a processor, a memory, and a computer program stored in the memory and executable by the processor, wherein when the computer program is executed by the processor, it implements the steps of the data migration 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, wherein when the computer program is executed by a processor, it implements the steps of the data migration method as described in any one of claims 1 to 7.