Data management method, device, electronic device and storage medium based on Vue

Abstract

The present application discloses a data management method, device, electronic device and storage medium based on Vue, which belongs to the field of computer technology. Among them, the method includes: identifying the current page operation, the current page operation includes a change operation, an undo operation or a restore operation; when the current page operation is a change operation, obtaining the changed data, and writing the changed data state into a history stack, the history stack is used to store the history records of page operations; when the current page operation is an undo operation or a restore operation, data undo or data restore is performed based on the history stack. When the user modifies the data through Vue or other means (including modification directly through JS code), these changes will be captured and stored in the history stack, so as to realize the undo and restore processing based on the history stack, which effectively solves the problem that the browser's native undo and restore functions fail when Vue.js is bidirectionally bound to data.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a data management method, device, electronic device and storage medium based on Vue. Background Art

[0002] In current Web development practices, Vue.js, as a widely used front-end framework, has greatly improved development efficiency and user experience through its unique responsive system and two-way data binding mechanism. However, both Vue2 and the latest Vue3 face limitations and challenges in specific scenarios when implementing two-way data binding.

[0003] Specifically, when the state of data managed by Vue changes, such as directly modifying the data bound to the text box through JavaScript (JS) code, such operations will not be recorded by the browser, and the browser's built-in back and forward functions cannot be used, that is, the browser's undo and restore functions (such as through browser shortcuts, using Ctrl+Z, Ctrl+Y on Windows, or Command+Z, Command+Shift+Z on macOS) will be invalid.

[0004] In business scenarios where text box content needs to be modified frequently and the browser's undo and restore functions are relied upon to backtrack or restore content, the browser's built-in undo or restore mechanism cannot meet the needs.

[0005] With respect to the above-mentioned problems existing in the related technologies, no effective solutions have been found so far. Summary of the invention

[0006] The present application provides a Vue-based data management method, device, electronic device and storage medium to solve the above-mentioned technical problems existing in the related technology.

[0007] According to one embodiment of the present application, a Vue-based data management method is provided, including: identifying a current page operation, wherein the current page operation includes a change operation, an undo operation, or a restore operation; when the current page operation is a change operation, obtaining the changed data, and writing the changed data state into a history stack, wherein the history stack is used to store historical records of page operations; when the current page operation is an undo operation or a restore operation, performing data undo or data restore based on the history stack.

[0008] According to another embodiment of the present application, a Vue-based data management device is provided, including: an identification module for identifying a current page operation, wherein the current page operation includes a change operation, an undo operation or a restore operation; a management module for obtaining the changed data when the current page operation is a change operation, and writing the changed data state into a history stack, wherein the history stack is used to store historical records of page operations; and when the current page operation is an undo operation or a restore operation, performing data undo or data restore based on the history stack.

[0009] Optionally, the management module includes a first acquisition unit, used to acquire a first stack pointer, which is an index indicating the data position in the history stack corresponding to the current change operation; a first deletion unit, used to delete the data after the position pointed to by the first stack pointer in the history stack; and a writing unit, used to write the changed data status to the latest position of the history stack.

[0010] Optionally, the management module also includes a second acquisition unit for acquiring the current history stack length; a first judgment unit for judging whether the current history stack length is greater than the limited length of the history stack; and a second deletion unit for deleting data from the bottom of the history stack if the current history stack length is greater than the limited length of the history stack, so as to keep the history stack length within the limited length of the history stack.

[0011] Optionally, the management module also includes a second judgment unit, used to judge whether the second stack pointer exceeds the limited length of the history stack, wherein the second stack pointer is an index used to indicate the data position in the current history stack; a first revocation unit, used to reset the value of the second stack pointer to the limited length of the history stack minus 1 if the second stack pointer exceeds the limited length of the history stack, and revoke the data at the position of the limited length of the history stack minus 1; if the second stack pointer does not exceed the limited length of the history stack, reset the value of the second stack pointer to the second stack pointer minus 1, and revoke the data at the previous storage position of the second stack pointer.

[0012] Optionally, the management module also includes a third judgment unit, used to determine whether the second stack pointer minus 1 has reached the bottom; a second undo unit, used to return the data at the bottom position of the historical stack to the business storage parameters for display if the second stack pointer minus 1 has reached the bottom; if the second stack pointer minus 1 has not reached the bottom, undo the data at the previous storage position of the second stack pointer.

[0013] Optionally, the management module also includes a fourth judgment unit, used to determine whether there is data at the position of the third stack pointer plus 1; a recovery unit, used to return the data at the position pointed to by the third stack pointer to the business storage parameters for display if there is no data at the position of the third stack pointer plus 1; if there is data at the position of the third stack pointer plus 1, reset the value of the third stack pointer to the third stack pointer plus 1, and restore to the data at the position of the third stack pointer plus 1.

[0014] Optionally, the Vue-based data management device also includes: a marking module for marking the operation type of the current page operation; a reading module for reading the operation type mark when the current page operation triggers data update monitoring; and a prohibition module for prohibiting the current page operation from being written into the history stack when the operation type is marked as an undo operation or a restore operation.

[0015] According to another embodiment of the present application, a computer storage medium is provided, in which a computer program is stored, wherein the computer program is configured to execute the steps of any of the above-mentioned device embodiments when running.

[0016] According to another embodiment of the present application, there is also provided an electronic device, including a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other via the communication bus; wherein: the memory is used to store computer programs; the processor is used to execute the steps in the above method by running the program stored in the memory.

[0017] According to yet another embodiment of the present application, a computer program product comprising instructions is also provided, which enables the computer to execute the steps in the above method when the computer program product is executed on the computer.

[0018] In the embodiment of the present application, by identifying the current page operation, the current page operation includes a change operation, an undo operation or a restore operation; when the current page operation is a change operation, the changed data is obtained, and the changed data state is written into the history stack, and the history stack is used to store the historical records of the page operation; when the current page operation is an undo operation or a restore operation, data undo or data restore is performed based on the history stack. When the user modifies the data through Vue or other means (including modification directly through JS code), these changes will be captured and stored in the history stack, so as to realize the undo and restore processing based on the history stack, which effectively solves the problem that the browser's native undo and restore functions fail when Vue.js is bidirectionally bound to data. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0020] Figure 1 is a hardware structure block diagram of a computer according to an embodiment of the present application;

[0021] Figure 2 This is a flow chart of a data management method based on Vue in an embodiment of the present application;

[0022] Figure 3 This is an application flow chart for realizing history stack revocation and restoration based on Vue3 data change in an embodiment of the present application;

[0023] Figure 4 It is a structural block diagram of a Vue-based data management device in an embodiment of the present application. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only embodiments of a part of the present application, not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work should fall within the scope of protection of the present application. It should be noted that the embodiments in the present application and the features in the embodiments can be combined with each other without conflict.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] Example 1

[0027] The method embodiment provided in the first embodiment of the present application can be executed in a mobile phone, a computer, a tablet or a similar computing device. Taking running on a computer as an example, Figure 1 is a hardware structure block diagram of a computer in an embodiment of the present application. Figure 1 As shown, the computer may include one or more ( Figure 1 Only one is shown in the figure) a processor 102 (the processor 102 may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA) and a memory 104 for storing data. Optionally, the computer may also include a transmission device 106 and an input / output device 108 for communication functions. It can be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above-mentioned computer. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations are shown.

[0028] The memory 104 can be used to store computer programs, for example, software programs and modules of application software, such as a computer program corresponding to a Vue-based data management method in an embodiment of the present application. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, that is, implementing the above method. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories may be connected to the computer via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0029] The transmission device 106 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of the computer. In one example, the transmission device 106 includes a network adapter (Network Interface Controller, referred to as NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission device 106 can be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0030] In this embodiment, a data management method based on Vue is provided. Figure 2 is a flow chart of a data management method based on Vue according to an embodiment of the present application, such as Figure 2 As shown, the process includes the following steps:

[0031] Step S10, identifying the current page operation, where the current page operation includes a change operation, an undo operation or a restore operation;

[0032] In this embodiment, the user operation includes a change operation, a cancel operation or a restore operation, which can be initiated by the user or automatically triggered by an interface request when the page is initialized.

[0033] Change operations include users actively writing to change data (for example, users manually enter or modify data in editable areas such as text boxes and input boxes on the page) or changing data by JavaScript (JS). In some cases, the user's operation may not be directly reflected as manual input, but triggering the execution of JS scripts by clicking buttons, etc., thereby changing the data in text boxes or other page elements. For example, a user clicks an "Import from File" button, and JS reads the file content and automatically fills it into the text box; or clicks a "Calculate" button, and JS calculates the result based on the current page data and displays it in the text box. In this mode, although the user does not directly enter data, his operation still causes data changes.

[0034] The undo operation is when the user finds that the data changes caused by the previous operation (whether manual input or JS change) are not in line with the expectations, the user can undo the most recent one or more data changes by clicking the "Undo" button.

[0035] The redo operation allows users to restore certain operations after they have been undone.

[0036] Step S20, when the current page operation is a change operation, obtain the changed data and write the changed data state into a history stack, wherein the history stack is used to store the history records of page operations; when the current page operation is an undo operation or a restore operation, perform data undo or data restore based on the history stack.

[0037] Through this embodiment, the history stack is used to store the historical records of page operations. When the user modifies the data through Vue or other means (including direct modification through JS code), these changes will be captured and stored in the history stack, so as to implement undo and restore processing based on the history stack, effectively solving the problem of failure of the browser's native undo and restore functions when Vue.js is bidirectionally bound to data.

[0038] In one implementation of this embodiment, writing the changed page data into the history stack includes:

[0039] A21, obtaining a first stack pointer, where the first stack pointer is an index indicating a data position in a history stack corresponding to a current change operation;

[0040] Get the first stack pointer (StackIndex). The first stack pointer is the index of the data location in the history stack (HistoryStack) corresponding to the current change operation. It identifies the location of the data currently being viewed or operated in the history stack. The data at this location is usually displayed to the user. The history stack is a list used to store historical records of user operations. The history stack has a length limit (i.e., the history stack limit length MaxLength). The history stack limit length can be customized according to actual needs, or it can take the default value. This limit determines the maximum number of records that can be stored in the history stack.

[0041] A22, deleting the data after the position pointed to by the first stack pointer in the history stack;

[0042] A23, writes the changed page data to the latest position of the history stack.

[0043] When performing data change operations, first process the history stack through HistoryStack.splice(StackIndex+1), that is, delete all subsequent data starting from position StackIndex+1. In an example: the history stack stores 6 data. When the user rewinds to the 3rd data, write new data in the text box, then the 4th to 6th data become irrelevant, and the new data will overwrite the 4th position and become the latest position. After the processing is completed, the new data is written to the latest position of HistoryStack through HistoryStack.push(data).

[0044] Through this implementation, valid change operations are stored in the history stack, which is convenient for users to backtrack and restore previous operation states.

[0045] In this embodiment, after writing the changed page data into the latest position of the history stack, the method further includes:

[0046] A24, get the current history stack length;

[0047] A25, determining whether the current history stack length is greater than the history stack limit length;

[0048] A26: If the current history stack length is greater than the history stack limit length, data is deleted starting from the bottom of the history stack to keep the history stack length within the history stack limit length.

[0049] In this embodiment, in order to maintain the length of the history stack, after each addition of new data, it is determined whether the current history stack length HistoryStack.length is greater than the history stack limit length MaxLength; if the history stack length exceeds the history stack limit length, HistoryStack.splice(0, HistoryStack.length - MaxLength) is used to remove the excess data from the beginning of the history stack until the length is within the history stack limit length. Data from 0 to the history stack length minus the history stack limit length is deleted from position 0, so that the history stack stores a sliding history data, and the oldest history data will be cleared to keep the entire history stack length always less than or equal to MaxLength. Memory usage is optimized by limiting its length.

[0050] Finally, the length of StackIndex is reset to the limited length of the history stack, and the operation type of the current page operation is marked as change, and the corresponding value of the StackControl tag is set to 0. The role of this tag is to be able to identify the current operation as a data change in the subsequent process, especially when triggering data update monitoring (such as Vue's watch), so that the data change operation can be recorded in the history stack for easy revocation or restoration.

[0051] In another implementation of this embodiment, when the current page operation is a revocation operation, revoking data based on the history stack includes:

[0052] B21, determining whether the second stack pointer exceeds the limited length of the history stack, wherein the second stack pointer is an index used to indicate the location of data in the current history stack;

[0053] B22, if the second stack pointer exceeds the limited length of the history stack, reset the value of the second stack pointer to the limited length of the history stack minus 1, and cancel the data at the position of the limited length of the history stack minus 1;

[0054] B23, if the second stack pointer does not exceed the limited length of the history stack, reset the value of the second stack pointer to the second stack pointer minus 1, and cancel the data at the previous storage position of the second stack pointer.

[0055] When performing a data undo operation, first determine whether the second stack pointer (StackIndex) exceeds the limited length of the history stack; the second stack pointer is an index used to indicate the location of data in the current history stack (HistoryStack), which identifies the location of the data currently being viewed or operated in the history stack, and the data at this location is usually displayed to the user.

[0056] In this implementation, it is still possible to intervene through a specific interface in consideration of external factors, such as directly setting the value of StackIndex to quickly locate a specific position in the history stack. Since the external system or user is usually not clear about the limited length of HistoryStack, when the external system attempts to set a value that exceeds the limited length of HistoryStack, this implementation automatically limits it to the set range, such as adjusting the excessive index value to the maximum length of HistoryStack minus 1 (MaxLength-1) to avoid data errors or system crashes. In one example, the limited length of the history stack is 10. If the value of StackIndex is a value that exceeds its range (such as 11) at this time, directly performing an index minus 1 operation will not bring any actual changes (because 11 minus 1 is still 10), or 14 minus 1 is 13, and there is no data at the 13th position in the history stack, which is manifested in the user experience as an invalid undo operation, so StackIndex is reset to the latest valid index of the history stack (MaxLength-1). If the second stack pointer does not exceed the limited length of the history stack, the value of the second stack pointer is reset to the second stack pointer minus 1 (StackIndex-1), that is, the data at the previous storage position of the second stack pointer is revoked.

[0057] This implementation verifies the stack index StackIndex before the undo operation. Specifically, the system checks whether the current StackIndex exceeds the limited length of the HistoryStack. If it does, necessary adjustments are made based on the logic, such as resetting the StackIndex to the latest valid index of the history stack (MaxLength-1) to ensure that subsequent undo operations can be performed correctly. In addition, through this step, the StackIndex can be effectively prevented from being improperly contaminated or modified by external factors, thereby ensuring the integrity of the history stack data and the stability of the undo and restore functions.

[0058] The undo function in this embodiment ensures that the user can accurately undo the last operation step, and can still maintain the stability of the system and the consistency of data when facing interference from external factors.

[0059] In this embodiment, since StackIndex will not infinitely roll back and will always reach the first location of the history stack where data is stored, after determining that the second stack pointer does not exceed the limited length of the history stack, the method further includes:

[0060] b231, determine whether the second stack pointer minus 1 has reached the bottom;

[0061] b232, if the second stack pointer decreases by 1 and reaches the bottom, the data at the bottom of the history stack is returned to the business storage parameter for display;

[0062] b233: if the second stack pointer is decremented by 1 but does not reach the bottom, the data at the previous storage position of the second stack pointer is cancelled.

[0063] Determine whether the second stack pointer minus 1 touches the bottom of the history stack (i.e., the earliest stored data position). Specifically, check whether the StackIndex after minus 1 is equal to the first valid index of the history stack (usually 0, indicating the starting point of the history stack). If this condition is met, it is determined that the operation has been withdrawn to the first step. At this time, no further undo processing will be performed because there are no other earlier historical records to be undone. The data at the bottom of the history stack is returned to the business storage parameter for display, that is, the page data of the initial operation is displayed. If the StackIndex after minus 1 does not touch the bottom, it means that there are earlier historical records to be rolled back. At this time, update the value of StackIndex, take the data at the position pointed to by the current StackIndex from the history stack, and write it back to the storage parameter on which the business logic depends to point to the previous storage position of the current index, so as to achieve data rollback, so that the user interface or internal state can reflect the result of the previous operation step.

[0064] In this embodiment, the operation type of the current page operation is marked as undo, and the corresponding setting mark StackControl value is -1. The role of this mark is that in the subsequent process, especially when triggering data update monitoring (such as Vue's watch), it can identify that the current operation is undo rather than other types of data changes, thereby avoiding unnecessary repeated processing or data overwriting. If such marking is not performed, the listener may mistakenly regard the data changes caused by the undo operation as new data changes, and try to store them in the history stack again, resulting in the undo operation actually failing to take effect. Therefore, when the data change monitoring is triggered later, the value of StackControl is judged and intercepted to ensure that the data of the undo operation will not be written to the latest position of the history stack, so that more accurate judgment and processing can be made in the subsequent data change monitoring.

[0065] In another implementation of this embodiment, when the current page operation is a recovery operation, performing data recovery based on the history stack includes:

[0066] C21, determine whether there is data at the position where the third stack pointer is plus 1;

[0067] C22, if there is no data at the position where the third stack pointer is plus 1, returning the data at the position pointed to by the third stack pointer to the business storage parameter for display;

[0068] C23, if there is data at the position of the third stack pointer plus 1, reset the value of the third stack pointer to the third stack pointer plus 1, and restore to the data at the position of the third stack pointer plus 1.

[0069] When performing a data recovery operation, first check whether there is a valid data item at the position after the index position in the HistoryStack pointed to by the third stack pointer (StackIndex) (ie, StackIndex+1) to identify whether there are more historical records to be recovered.

[0070] If there is no valid value at the position of the third stack pointer plus 1 (StackIndex+1), that is, the top of the HistoryStack has been reached or the position is empty, it means that there is no more historical record to be restored. At this time, the operation will return directly without performing any subsequent data processing or status update. If there is a valid value at the position of the third stack pointer plus 1, it means that there is still historical record to be restored. Then, the value of StackIndex plus 1 is assigned to StackIndex itself, the corresponding historical data is obtained from the updated StackIndex index position, and the data is sent back to the specified storage parameter to complete the recovery operation.

[0071] In this embodiment, the operation type of the current page operation is marked as recovery, and the corresponding value of the StackControl flag is set to 1. When the data change monitoring is subsequently triggered, the value of StackControl is judged and intercepted to ensure that the data of the recovery operation will not be written to the latest position of the history stack.

[0072] In another implementation of this embodiment, after the data of the history stack is passed back to the storage parameters in the undo or restore operation, the watch monitoring mechanism of Vue will be automatically triggered. However, not every change in the storage parameters needs to be recorded in the history stack, because it will lead to repeated processing and data overwriting. In order to avoid this situation, the StackControl parameter is introduced in this implementation as a flag to control whether the history record operation is performed under certain conditions. After performing data undo or data restore based on the history stack, the method also includes:

[0073] D1, marking the operation type of the current page operation;

[0074] D2, when the current page operation triggers data update monitoring, reading the operation type tag;

[0075] D3: When the operation type is marked as an undo operation or a restore operation, it is prohibited to write the current page operation into the history stack.

[0076] Referring to the above implementation, the initial value of the operation type mark StackControl is 0, the value of the operation type mark StackControl corresponding to the undo operation is -1, the value of the operation type mark StackControl corresponding to the restore operation is 1, and the initial value of the operation type mark StackControl corresponding to the change operation is 0. After the current page operation is completed, the value of the operation type mark StackControl is read.

[0077] If the value of StackControl is -1 or 1, it means that the current operation is an undo or restore operation, and its purpose is to restore or undo a certain historical state, rather than to create a new historical record point. Therefore, the value of StackControl is reset to 0, and the operation of saving the current state to the history stack is skipped. The purpose of this is to prevent the current state from being mistakenly regarded as a new state and repeated recording in subsequent watch monitoring. If the value of StackControl is not -1 or 1, it is considered a normal state change, and the current state is saved as a new historical record point in the history stack.

[0078] This ensures that undo or redo operations do not incorrectly create history points under certain conditions, thus avoiding performance issues and data redundancy.

[0079] In another implementation of this embodiment, obtaining the changed data includes:

[0080] Determine whether the timer parameter TimeId is null (the state when no value is assigned). If timeId is null, it means that there is no active timer at present, that is, the last operation has been completed or has never started. If it is not null, it means that there is a timer waiting to be triggered. Then use clearTimeout to clear the current timer. Then the logic in setTimeout will not be executed before the timer is triggered (such as 300ms). What is executed in setTimeout is to write the changed storage parameters to the history stack, and then execute setTimeout to assign the value to timeId. Finally, reset timeId to null to indicate that this processing is completed. Among them, the delay time of the timer (such as 300ms) is set according to actual needs. In the callback function of the timer, execute the operation of writing the current input value to the history stack.

[0081] Through this implementation, the continuous input of the user within a short period of time (such as within 300ms) is effectively merged into a single event processing, saving the storage space of the history stack, thereby improving the performance and response speed of the application and optimizing the user experience. For example, if the user quickly enters "123" within 300ms, the entire input sequence will be regarded as a whole, and the new input will start a new timing cycle.

[0082] Reference Figure 3 The solution of this embodiment provides an application method for realizing the undo and restore of the history stack based on Vue3 data change, including:

[0083] A: User operations, including active operations or operations triggered by interface requests that have other initialization data when entering a page.

[0084] B: Determine based on the user's operation method: 1. Manually write and change data (user manually inputs into the text box, or other operations) or js changes (some text operations are triggered by buttons, and then assigned to the text box); 2. Undo data, after the user clicks the undo button, the undo operation of this solution is executed; 3. Restore data, after the user clicks the restore button, the restore operation of this solution is executed.

[0085] C: When the operation is to undo, the internal implementation first determines whether the data position mark StackIndex used to maintain the current history stack exceeds the limited length of the list of current storage history data changes (history stack HistoryStack). If it exceeds, the index of StackIndex is reset to the current history stack length minus 1 (that is, the latest position, to prevent StackIndex from being polluted when used elsewhere); then determine whether the index of StackIndex minus 1 has bottomed out. If it has bottomed out, it is determined to be withdrawn to the first step without further processing; if it has not bottomed out, the StackIndex index minus 1 is processed and assigned to itself, that is, the previous storage position of this index is obtained, and then the mark StackControl is written to -1 (marking the current processing method as undo), and finally the data of this storage position is returned and written to the business storage parameters.

[0086] D: When the operation is to restore, first determine whether there is a value in the StackIndex index plus 1. If not, return directly without further processing. If there is a value, you need to assign the StackIndex index value plus 1 to itself, write the mark StackControl to 1, and finally obtain the historical stack data at the StackIndex index and return it to the storage parameter.

[0087] E: The undo and redo operations will trigger Vue's watch monitoring by returning the location data of the history stack StackIndex to the storage parameter. At this time, the StackControl parameter is used to make a judgment; if the parameter is -1 or 1, StackControl is assigned to 0 and no processing is done, otherwise it goes to step F for throttling operation.

[0088] F. First, determine whether the timer parameter time Id is null. If so, use clearTimeout to clear the current timer, and then execute setTimeout to assign a value to timeId. What is executed in setTimeout is to write the changed storage parameters to the history stack (step G), and then reset timeId to null to indicate that this processing has been completed.

[0089] G: First, process the history stack HistoryStack.splice(StackIndex+1). After processing, write the new data to the latest position of HistoryStack, that is, HistoryStack.push(data). Then determine whether the length of the history stack HistoryStack.length is greater than the history stack limit length MaxLength. If the history stack length exceeds MaxLength, use HistoryStack.splice(0, HistoryStack.length - MaxLength) to process the excess history part again. Finally, reset the length of StackIndex to the history stack length and write the stackControl value to 0.

[0090] H: Complete the historical stack processing of the corresponding data.

[0091] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0092] Example 2

[0093] In this embodiment, a Vue-based data management device is also provided to implement the above-mentioned embodiments and preferred implementation modes, which have been described and will not be repeated. As used below, the term "module" can implement a combination of software and / or hardware for a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0094] Figure 4 is a structural block diagram of a Vue-based data management device according to an embodiment of the present application, such as Figure 4 As shown, the device comprises:

[0095] An identification module 41 is used to identify a current page operation, where the current page operation includes a change operation, an undo operation or a restore operation;

[0096] The management module 42 is used to obtain the changed data and write the changed data status into a history stack when the current page operation is a change operation. The history stack is used to store the historical records of page operations. When the current page operation is an undo operation or a restore operation, data undo or data restore is performed based on the history stack.

[0097] It should be noted that the above modules can be implemented by software or hardware. For the latter, it can be implemented in the following ways, but not limited to: the above modules are all located in the same processor; or the above modules are located in different processors in any combination.

[0098] Example 3

[0099] An embodiment of the present application further provides a computer storage medium, in which a computer program is stored, wherein the computer program is configured to execute the steps of any of the above method embodiments when running.

[0100] Optionally, in this embodiment, the computer storage medium may be configured to store a computer program for performing the following steps:

[0101] S1, identifying a current page operation, where the current page operation includes a change operation, an undo operation, or a restore operation;

[0102] S2, when the current page operation is a change operation, obtain the changed data and write the changed data state into a history stack, wherein the history stack is used to store the historical records of page operations; when the current page operation is an undo operation or a restore operation, perform data undo or data restore based on the history stack.

[0103] Optionally, in this embodiment, the above-mentioned computer storage medium may include but is not limited to: a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk, and other media that can store computer programs.

[0104] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein a computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0105] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0106] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:

[0107] S1, identifying a current page operation, where the current page operation includes a change operation, an undo operation, or a restore operation;

[0108] S2, when the current page operation is a change operation, obtain the changed data and write the changed data state into a history stack, wherein the history stack is used to store the historical records of page operations; when the current page operation is an undo operation or a restore operation, perform data undo or data restore based on the history stack.

[0109] Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments and optional implementation modes, and this embodiment will not be described in detail here.

[0110] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0111] In the above embodiments of the present application, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.

[0112] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0113] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0114] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0115] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a computer storage medium, including several instructions to enable a computer device (which can be a personal computer, server or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned computer storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, disk or optical disk and other media that can store program codes.

[0116] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A data management method based on Vue, characterized in that: The method comprises: Identify a current page operation, where the current page operation includes a change operation, an undo operation, or a restore operation; When the current page operation is a change operation, the changed data is obtained, and the changed data state is written into a history stack, where the history stack is used to store the history records of page operations; when the current page operation is an undo operation or a restore operation, data undo or data restore is performed based on the history stack; After revoking or restoring data based on the history stack, the method further includes: Marking the operation type of the current page operation; When the current page operation triggers data update monitoring, reading the operation type tag; When the operation type is marked as an undo operation or a restore operation, it is prohibited to write the current page operation into the history stack; When the current page operation is an undo operation, revoking data based on the history stack includes: determining whether the second stack pointer exceeds the limited length of the history stack, wherein the second stack pointer is an index used to indicate the data position in the current history stack; if the second stack pointer exceeds the limited length of the history stack, resetting the value of the second stack pointer to the limited length of the history stack minus 1, and revoking the data at the position of the limited length of the history stack minus 1; if the second stack pointer does not exceed the limited length of the history stack, resetting the value of the second stack pointer to the second stack pointer minus 1, and revoking the data at the previous storage position of the second stack pointer; The data at the last storage position of the second stack pointer is revoked, including: determining whether the second stack pointer is reduced by 1 and reaches the bottom; if the second stack pointer is reduced by 1 and reaches the bottom, returning the data at the bottom position of the history stack to the business storage parameter for display; if the second stack pointer is reduced by 1 and does not reach the bottom, revoking the data at the last storage position of the second stack pointer; When the current page operation is a recovery operation, data recovery based on the history stack includes: determining whether there is data at the position of the third stack pointer plus 1; if there is no data at the position of the third stack pointer plus 1, returning the data at the position pointed to by the third stack pointer to the business storage parameter for display; if there is data at the position of the third stack pointer plus 1, resetting the value of the third stack pointer to the third stack pointer plus 1, and restoring to the data at the position of the third stack pointer plus 1.

2. The method according to claim 1, characterized in that Writing the changed data status into the history stack includes: Obtaining a first stack pointer, where the first stack pointer is an index indicating a data location in a history stack corresponding to a current change operation; Deleting the data after the position pointed to by the first stack pointer in the history stack; The changed data state is written into the latest position of the history stack.

3. The method according to claim 2, characterized in that After writing the changed data state into the latest position of the history stack, the method further includes: Get the current history stack length; Determine whether the current history stack length is greater than the history stack limit length; If the current history stack length is greater than the history stack limit length, data is deleted starting from the bottom of the history stack to keep the history stack length within the history stack limit length.

4. A data management device based on Vue, characterized in that: include: An identification module, used to identify a current page operation, where the current page operation includes a change operation, an undo operation, or a restore operation; A management module, used for obtaining the changed data when the current page operation is a change operation, and writing the changed data state into a history stack, wherein the history stack is used for storing the history records of the page operation; When the current page operation is an undo operation or a restore operation, performing data undo or data restore based on the history stack; A marking module, used for marking the operation type of the current page operation; A reading module, used for reading the operation type tag when the current page operation triggers data update monitoring; a prohibition module, used for prohibiting the current page operation from being written into the history stack when the operation type is marked as an undo operation or a restore operation; The management module further includes a second judgment unit, configured to judge whether the second stack pointer exceeds the limited length of the history stack, wherein the second stack pointer is an index for indicating the data position in the current history stack; a first revocation unit, configured to reset the value of the second stack pointer to the limited length of the history stack minus 1 if the second stack pointer exceeds the limited length of the history stack, and to revoke the data at the position of the limited length of the history stack minus 1; if the second stack pointer does not exceed the limited length of the history stack, reset the value of the second stack pointer to the second stack pointer minus 1, and to revoke the data at the previous storage position of the second stack pointer; The management module further includes a third judgment unit for judging whether the second stack pointer has reached the bottom when it is decremented by 1; a second revocation unit for returning the data at the bottom of the history stack to the business storage parameter for display if the second stack pointer has reached the bottom when it is decremented by 1; and revoking the data at the previous storage position of the second stack pointer if the second stack pointer has not reached the bottom when it is decremented by 1; The management module also includes a fourth judgment unit, which is used to judge whether there is data at the position of the third stack pointer plus 1; a recovery unit, which is used to return the data at the position pointed to by the third stack pointer to the business storage parameter for display if there is no data at the position of the third stack pointer plus 1; if there is data at the position of the third stack pointer plus 1, reset the value of the third stack pointer to the third stack pointer plus 1, and restore to the data at the position of the third stack pointer plus 1.

5. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; wherein: Memory, used to store computer programs; A processor, configured to execute the Vue-based data management method according to any one of claims 1 to 3 by running a program stored in a memory.

6. A computer storage medium, characterized in that: The computer storage medium includes a stored program, wherein the Vue-based data management method according to any one of claims 1 to 3 is executed when the program is run.

Images