CN115061706A - Vue3 component state management method, device, equipment and medium - Google Patents
Vue3 component state management method, device, equipment and medium Download PDFInfo
- Publication number
- CN115061706A CN115061706A CN202210667828.7A CN202210667828A CN115061706A CN 115061706 A CN115061706 A CN 115061706A CN 202210667828 A CN202210667828 A CN 202210667828A CN 115061706 A CN115061706 A CN 115061706A
- Authority
- CN
- China
- Prior art keywords
- state
- component
- vue3
- preset
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/23—Updating
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Computer Security & Cryptography (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The application discloses a Vue3 component state management method, device, equipment and medium, and belongs to the technical field of design information. The method comprises the following steps: acquiring a first target instruction sent through a preset interface on a target page; executing an operation corresponding to the first target instruction through a preset reducer function according to the first target instruction, and acquiring a current component state of an Vue3 component corresponding to the target page after the operation is executed; and updating the corresponding historical component state in a preset state database by using the current component state, and sending the corresponding component state updating result to the target page. Through the technical scheme, when the Vue3 component is subjected to state management, the state management of Vue is realized in a code combination mode of Vue3, the development cost and the project complexity are reduced, the loading burden is reduced, and the loading speed is increased. In conclusion, the present application can improve the state management efficiency by facilitating the Vue3 component state management.
Description
Technical Field
The present invention relates to the field of information technology, and in particular, to a method, an apparatus, a device, and a medium for managing the status of an Vue3 component.
Background
With the iteration of the Vue version, Vue3 was released formally at 18.9.2020 and became the default version of Vue at 7.2.2022, more and more businesses and teams began selecting Vue3 for normal development. The state management library recommended by the authorities in the ecology of Vue3 is still Vuex, and nowadays more and more developers choose to develop the state management library by using TypeScript and Vue3, but because of the weak support and the excessively bloated definition and poor performance of Vuex on TypeScript, many developers still cannot have good development experience when developing by using Vuex. When the Vue3 components are subjected to state management by using Vuex in the prior art, even a small amount of state management is required in a project, the corresponding full amount of packages are required to be introduced, so that the complexity of operation is increased, and the problem of complicated and redundant operation exists. In summary, the problem of how to perform Vue3 component state management more easily and improve the state management efficiency needs to be further solved.
Disclosure of Invention
In view of the above, an object of the present invention is to provide an Vue3 component state management method, apparatus, device, and medium, which can improve the state management efficiency by simplifying the Vue3 component state management. The specific scheme is as follows:
in a first aspect, the present application discloses an Vue3 component status management method, including:
acquiring a first target instruction sent through a preset interface on a target page;
executing an operation corresponding to the first target instruction through a preset reducer function according to the first target instruction, and acquiring a current component state of an Vue3 component corresponding to the target page after the operation is executed;
and updating the corresponding historical component state in a preset state database by using the current component state, and sending the corresponding component state updating result to the target page.
Optionally, the method further includes:
the global state is saved by a predefined state function and the data state to be managed is converted to responsive by Vue3 native responsive systems.
Optionally, the method further includes:
collecting Vue3 historical component state data of the component, and saving the historical component state data to the preset state database.
Optionally, the collecting Vue3 data of the historical component state of the component, and saving the data of the historical component state to the preset state database includes:
collecting data of the Vue3 component's historical component state and injecting the data of the historical component state into a root component in a component tree corresponding to the Vue3 component;
and transmitting the data of the historical component state from the root component to the corresponding sub-component and storing the data of the historical component state into the preset state database through a provide function preset in the root component and an inject function preset in the corresponding sub-component.
Optionally, after collecting the data of the historical component states of the Vue3 components and injecting the data of the historical component states into the root component in the component tree corresponding to the Vue3 component, the method further includes:
dividing modules corresponding to the data of the historical component state, and adding a corresponding log monitoring hook function in each module;
and monitoring the state change by using a new characteristic proxy mode of the ES6 in Vue3, recording the state change, and acquiring a corresponding state change log by using the log monitoring hook function.
Optionally, the method further includes:
and executing operation corresponding to a second target instruction through a preset combined interface in the preset state database.
Optionally, the executing, through a combined interface preset in the preset state database, an operation corresponding to the second target instruction includes:
and when the data in the preset state database changes, executing the operation corresponding to the callback instruction through a subscription state interface preset in the preset state database so as to subscribe the corresponding data of the changed component state.
In a second aspect, the present application discloses an Vue3 component state management apparatus, comprising:
the instruction acquisition module is used for acquiring a first target instruction sent through a preset interface on a target page;
the operation execution module is used for executing the operation corresponding to the first target instruction through a preset reducer function according to the first target instruction and acquiring the current component state of the Vue3 component corresponding to the target page after the operation is executed;
and the state updating module is used for updating the corresponding historical component state in a preset state database by using the current component state and sending the corresponding component state updating result to the target page.
In a third aspect, the present application discloses an electronic device, comprising:
a memory for storing a computer program;
a processor for executing the computer program to implement the steps of the Vue3 component state management method disclosed above.
In a fourth aspect, the application discloses a computer readable storage medium for storing a computer program; wherein the computer program when executed by a processor implements the steps of the Vue3 component state management method disclosed above.
When Vue3 subassembly state management is being carried out to this application, acquire the first target instruction that sends through the interface of predetermineeing on the target page earlier, then according to first target instruction through predetermine reduce function execution with the operation that first target instruction corresponds to obtain behind the execution operation the current subassembly state of the Vue3 subassembly that the target page corresponds utilizes at last current subassembly state is to predetermineeing corresponding historical subassembly state in the state database and updating the result with corresponding subassembly state and send to the target page. It can be seen that, when Vue3 subassembly state management is being carried out in this application, when obtaining the first target instruction that obtains through predetermineeing the interface, carry out through predetermineeing the reducer function the operation that first target instruction corresponds to couple remove the current subassembly state after the execution operation, and according to current subassembly state is right history subassembly state in the state database of predetermineeing updates, will update the result send to at last the target page. Therefore, when Vue3 component state management is performed, instructions are obtained through a preset interface of Vue3, corresponding instructions are executed through a preset reducer function, and the corresponding current component state after the first target is executed is updated to a preset state database, so that Vue state management is realized through Vue3 code combination mode when Vue3 components are subjected to state management, development cost and project complexity are reduced, global environment pollution caused by that the states of all service modules are all thrown to the global is avoided, loading burden is reduced, loading speed is increased, and the size of files after project packing is reduced; meanwhile, the horizontal expansion capability of state management is enhanced, repeated modification of codes due to increase and decrease of service modules is not needed, and finally separation of state management, automation of loading, reduction of file volume after item packing and optimization of rendering and loading are achieved. In summary, the present application can improve the state management efficiency by facilitating the Vue3 component state management.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
FIG. 1 is a flow chart of a Vue3 component status management method according to the present application;
FIG. 2 is a schematic diagram of parent and child components provided herein;
FIG. 3 is a schematic diagram of a historical component status data collection process provided herein;
FIG. 4 is a flow chart of a specific Vue3 component state management method provided herein;
FIG. 5 is a block diagram of a state management module according to the present application;
fig. 6 is a preset state database structure diagram provided in the present application;
FIG. 7 is a flow chart illustrating a method for managing the status of the Vue3 component according to the present application;
fig. 8 is a schematic structural diagram of an Vue3 module status management device according to the present application;
fig. 9 is a block diagram of an electronic device provided in the present application.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The state management library recommended by the authorities in the ecology of Vue3 is still Vuex, and nowadays more and more developers choose to develop the state management library by using TypeScript and Vue3, but because of the weak support and the excessively bloated definition and poor performance of Vuex on TypeScript, many developers still cannot have good development experience when developing by using Vuex. When the Vue3 components are subjected to state management by using Vuex in the prior art, even a small amount of state management is required in a project, the corresponding full amount of packages are required to be introduced, so that the complexity of operation is increased, and the problem of complicated and redundant operation exists. Therefore, the problem of how to perform Vue3 component state management more easily and improve the state management efficiency needs to be further solved.
The embodiment of the invention discloses an Vue3 component state management method, which comprises the following steps of:
step S11: the method comprises the steps of obtaining a first target instruction sent through a preset interface on a target page.
In the present embodiment, the global state is saved by the predefined state function, and the data state needing management is converted into a response type by Vue3 native response type system. Specifically, the predefined state function is useState (), and the state of data to be managed by ref, computed or reactive in Vue3 is converted into a response type. Further, creating a usehooks () function implements some specific state operation logic. In this embodiment, state operation information corresponding to the execution of the first target is obtained by obtaining the first target instruction sent by a preset interface on a target page, so that the first target instruction is executed subsequently through a pre-created function, and thus the operation corresponding to the first target instruction (i.e., action) is executed subsequently through a preset reducer function, and after the execution, the corresponding historical component state in a preset state database (i.e., store) is updated by using the current component state.
Step S12: and executing the operation corresponding to the first target instruction through a preset reducer function according to the first target instruction, and acquiring the current component state of the Vue3 component corresponding to the target page after the operation is executed.
In this embodiment, according to the first target instruction, an operation corresponding to the first target instruction is executed through a preset reducer function. The preset reducer function changes the corresponding state in the store, namely the real executor of the action and the execution action after the event occurs, when receiving the action notification. Through above-mentioned technical scheme, use preset reducer function in Vue3 to carry out with the operation that first target instruction corresponds to in subsequent utilization current component state is to presetting corresponding historical component state in the state database and updating.
Step S13: and updating the corresponding historical component state in a preset state database by using the current component state, and sending the corresponding component state updating result to the target page.
In this embodiment, before updating the corresponding historical component state in the preset state database by using the current component state and sending the corresponding component state update result to the target page, the method further includes: collecting Vue3 historical component state data of the component, and saving the historical component state data to the preset state database. Specifically, data of the historical component state of the Vue3 component is collected and injected into a root component in a component tree corresponding to the Vue3 component; and transmitting the data of the historical component state from the root component to the corresponding sub-component and storing the data of the historical component state into the preset state database through a provide function preset in the root component and an inject function preset in the corresponding sub-component. It is understood that in Vue, when communication between parent and child components is required, values can be passed between components using props, but when the component level nesting is deep or the data passing state is complicated, the state of the deep component to the parent component is abnormal, and at this time, a relationship between active provisioning and dependent injection can be established between components at the cross level using provide and inject. For this case, a pair of provide and inject is used. Regardless of how deep the component hierarchy is, a parent component can act as a dependency provider for all its children, as shown in FIG. 2 below. This feature has two components: parent components have a provide option to provide data and child components have an inject option to begin using the data. In the historical component state data collection process, as shown in fig. 3, a native responsive system converts data states needing management into responsive states through Vue3, a root component serves as a dependent provider of all components, the data states are provided through provide, and then the collected states are received in sub-components through inject and unique identification.
In this embodiment, the preset state database is a warehouse storing all component states, and some preset interfaces for operating the preset state database are provided, and the user performs subsequent operations in the warehouse. And executing the operation corresponding to the first target instruction through a preset reducer function according to the first target instruction, wherein the first target instruction is an action, the action aims to change a certain state in a Store and a trigger condition or password of a certain operation, acquire the current component state of the Vue3 component corresponding to the target page after the operation is executed, and update the corresponding historical component state in a preset state database by using the current component state.
It can be seen that, in the present embodiment, when Vue3 component state management is performed, when a first target instruction obtained through a preset interface is obtained, an operation corresponding to the first target instruction is executed through a preset reducer function, and a current component state after the operation is executed is coupled, and according to the current component state, a history component state in a preset state database is updated, and finally, an update result is sent to the target page. Therefore, when Vue3 component state management is performed, instructions are obtained through a preset interface of Vue3, corresponding instructions are executed through a preset reducer function, and the corresponding current component state after the first target is executed is updated to a preset state database, so that Vue state management is realized through Vue3 code combination mode when Vue3 components are subjected to state management, development cost and project complexity are reduced, global environment pollution caused by that the states of all service modules are all thrown to the global is avoided, loading burden is reduced, loading speed is increased, and the size of files after project packing is reduced; meanwhile, the horizontal expansion capability of state management is enhanced, repeated modification of codes due to increase and decrease of service modules is not needed, and finally separation of state management, automation of loading, reduction of file volume after item packing and optimization of rendering and loading are achieved. In conclusion, the present application can improve the state management efficiency by facilitating the Vue3 component state management.
Referring to fig. 4, the embodiment of the present invention discloses a specific Vue3 component status management method, and compared with the previous embodiment, the present embodiment further describes and optimizes the technical solution.
Step S21: the method comprises the steps of obtaining a first target instruction sent through a preset interface on a target page.
Step S22: and executing the operation corresponding to the first target instruction through a preset reducer function according to the first target instruction, and acquiring the current component state of the Vue3 component corresponding to the target page after the operation is executed.
In the present embodiment, the relationship among store, action, and reducer is shown in fig. 5. The state manager is a simple state machine, the Store stores all states, the Action is a notification for changing the states, and the Reducer changes the corresponding states in the Store after receiving the notification. By the technical scheme, the current component state is conveniently and subsequently utilized to update the corresponding historical component state in the preset state database.
Step S23: and updating the corresponding historical component state in a preset state database by using the current component state, and sending the corresponding component state updating result to the target page.
In this embodiment, the method further includes: and executing operation corresponding to a second target instruction through a combined interface preset in the preset state database. Specifically, when data in the preset state database changes, an operation corresponding to the callback instruction is executed through a subscription state interface preset in the preset state database, so as to subscribe the data of the corresponding changed component state. It can be understood that the state management process is actually using a publish-subscribe mode, and performing an operation corresponding to the second target instruction through a combined interface preset in the preset state database, where the store records the states of all components of all pages, as shown in fig. 6; the createStore takes a reducer method as a parameter, returns corresponding data to the store and sets a main service function on the store; the subscribe is used for subscribing the change of the state, when the state changes, the callback is executed, and a plurality of subscribes can be provided, and the callbacks in the subscribes can be executed in sequence; dispatch is a method for sending out action, each dispatch action executes reducer to generate new state, and then executes callback registered by describe; getState is used for returning the current state; reducer is the change of state at the time of the issue of an event. Specifically, as shown in fig. 7, the store records all states, the subscribe registers a callback, the dispatch triggers the callback, and the function of reducer is to change the state when an event is issued, so that our dispatch should execute reducer before executing the callback, and assign the state again with the return value of reducer.
Step S24: and monitoring the state change by using the new characteristic proxy mode of the ES6 in Vue3, recording the state change, and acquiring a corresponding state change log by using a log monitoring hook function.
In this embodiment, before using the new property proxy mode of ES6 in Vue3 to listen for and record the state change, and obtain the corresponding state change log through the log listening hook function, the method further includes: and dividing modules corresponding to the data of the historical component state, and adding a corresponding log monitoring hook function in each module. Namely, user operations of some usesitelog () serialized records are created, and state snapshots can be set, so that Bug reports and error reproduction of developers are facilitated. It can be understood that, since the change of state is made by ref/active of Vue3, and the listening for the change of state is made by the two Vue3 internal APIs, it would be troublesome to take the change of state, but the toaw internal API of Vue3 may be used to remove the responsivity from the state first, and then add the listening function manually, i.e. the change of state is listened by using the new property proxy of ES6, the state generated when the store is initialized will traverse the addition log related hook, and when the state changes, the change of state is recorded by the set property of proxy, and these changes are saved as a log.
As can be seen, in this embodiment, the operation corresponding to the second target instruction is executed through the combined interface preset in the preset state database, so that each service module is reasonably separated by a code, and the state management of each service module performs its own function without mutual intervention; meanwhile, the state change monitoring of the method is realized by means of an Vue3 native response type system, so that not only are Vue3 projects conformed, the complexity of the projects is reduced, the development efficiency is improved, but also other contents are not depended on, the loading speed of the projects is reduced, the volume of the packed projects is reduced, and the loading speed of the page is improved. The method applies the idea of state machine and subscription publishing in the aspect of state management, so that the code architecture is more stable and easy to expand or reconstruct, the code logic is clearer, the codes are concentrated, the coupling degree is reduced, the method can be well understood, and the maintenance is easier. Compared with other conventional methods, the proxy is used for tracing the log of the ES6, the proxy can monitor the change of the object more simply, conveniently, efficiently and accurately, the log tracing is more accurate and simple, and the performance of the proxy is better in each browser.
Referring to fig. 8, an embodiment of the present application discloses an Vue3 component status management device, including:
the instruction obtaining module 11 is configured to obtain a first target instruction sent through a preset interface on a target page;
the operation execution module 12 is configured to execute, according to the first target instruction, an operation corresponding to the first target instruction through a preset reducer function, and obtain a current component state of an Vue3 component corresponding to the target page after the operation is executed;
and the state updating module 13 is configured to update the corresponding historical component state in the preset state database by using the current component state, and send a corresponding component state updating result to the target page.
It can be seen that, when Vue3 component state management is performed in this embodiment, when a first target instruction obtained through a preset interface is obtained, an operation corresponding to the first target instruction is executed through a preset reducer function, the current component state after the operation is executed is coupled, the historical component state in the preset state database is updated according to the current component state, and finally, an update result is sent to the target page. Therefore, when Vue3 component state management is performed, instructions are obtained through a preset interface of Vue3, corresponding instructions are executed through a preset reducer function, and the corresponding current component state after the first target is executed is updated to a preset state database, so that Vue state management is realized through Vue3 code combination mode when Vue3 components are subjected to state management, development cost and project complexity are reduced, global environment pollution caused by that the states of all service modules are all thrown to the global is avoided, loading burden is reduced, loading speed is increased, and the size of files after project packing is reduced; meanwhile, the horizontal expansion capability of state management is enhanced, repeated modification of codes due to increase and decrease of service modules is not needed, and finally separation of state management, automation of loading, reduction of file volume after item packing and optimization of rendering and loading are achieved. In summary, the present application can improve the state management efficiency by facilitating the Vue3 component state management.
In some embodiments, the Vue3 component status management apparatus further includes:
and the state transition module is used for saving the global state through a predefined state function and converting the data state needing management into a response type through Vue3 a native response type system.
In some embodiments, the Vue3 component status management apparatus further includes:
and the historical state collection module is used for collecting data of the historical component state of the Vue3 component and storing the data of the historical component state into the preset state database.
In some specific embodiments, the historical state collecting module specifically includes:
collecting data of historical component states of the Vue3 components and injecting the data of the historical component states into a root component in a component tree corresponding to the Vue3 component;
and transmitting the data of the historical component state from the root component to the corresponding sub-component and storing the data of the historical component state into the preset state database through a provide function preset in the root component and an inject function preset in the corresponding sub-component.
In some embodiments, the Vue3 component status management apparatus further includes:
the function adding module is used for dividing the modules corresponding to the data of the historical component state and adding a corresponding log monitoring hook function into each module;
and the log monitoring module is used for monitoring the state change by using the new characteristic proxy mode of the ES6 in the Vue3, recording the state change and acquiring a corresponding state change log through the log monitoring hook function.
In some embodiments, the Vue3 component status management apparatus further includes:
and the instruction execution module is used for executing the operation corresponding to the second target instruction through a combined interface preset in the preset state database.
In some embodiments, the instruction execution module is specifically configured to: and when the data in the preset state database changes, executing the operation corresponding to the callback instruction through a subscription state interface preset in the preset state database so as to subscribe the corresponding data of the changed component state.
Fig. 9 illustrates an electronic device 20 according to an embodiment of the present application. The electronic device 20 may further include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input output interface 25, and a communication bus 26. Wherein, the memory 22 is used for storing a computer program, and the computer program is loaded and executed by the processor 21 to implement the relevant steps in the Vue3 component state management method disclosed in any of the foregoing embodiments. In addition, the electronic device 20 in the present embodiment may be specifically an electronic computer.
In this embodiment, the power supply 23 is used to provide voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and an external device, and a communication protocol followed by the communication interface is any communication protocol applicable to the technical solution of the present application, and is not specifically limited herein; the input/output interface 25 is configured to obtain external input data or output data to the outside, and a specific interface type thereof may be selected according to specific application requirements, which is not specifically limited herein.
In addition, the memory 22 is used as a carrier for resource storage, and may be a read-only memory, a random access memory, a magnetic disk or an optical disk, etc., and the resources stored thereon may include an operating system 221, a computer program 222, etc., and the storage manner may be a transient storage manner or a permanent storage manner.
The operating system 221 is used for managing and controlling each hardware device on the electronic device 20, and the computer program 222 may be Windows Server, Netware, Unix, Linux, or the like. The computer programs 222 may further include computer programs that can be used to perform other specific tasks in addition to the computer programs that can be used to perform the Vue3 component status management method disclosed by any of the foregoing embodiments and executed by the electronic device 20.
Further, the present application also discloses a computer-readable storage medium for storing a computer program; wherein the computer program when executed by a processor implements the Vue3 component state management method disclosed previously. For the specific steps of the method, reference may be made to the corresponding contents disclosed in the foregoing embodiments, which are not described herein again.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in the process, method, article, or apparatus that comprises the element.
The Vue3 component state management method, device, apparatus and medium provided by the present invention are described in detail above, and the principle and the implementation of the present invention are explained in detail herein by applying specific examples, and the description of the above examples is only used to help understanding the method and the core idea of the present invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (10)
1. An Vue3 component state management method, comprising:
acquiring a first target instruction sent through a preset interface on a target page;
executing an operation corresponding to the first target instruction through a preset reducer function according to the first target instruction, and acquiring a current component state of an Vue3 component corresponding to the target page after the operation is executed;
and updating the corresponding historical component state in a preset state database by using the current component state, and sending the corresponding component state updating result to the target page.
2. The Vue3 component state management method of claim 1, further comprising:
the global state is saved by a predefined state function and the data state to be managed is converted to responsive by Vue3 native responsive systems.
3. The Vue3 component state management method of claim 1, further comprising:
collecting Vue3 historical component state data of the component, and saving the historical component state data to the preset state database.
4. The Vue3 component state management method of claim 3, wherein the collecting Vue3 data of historical component states of the component and saving the data of the historical component states to the preset state database comprises:
collecting data of the Vue3 component's historical component state and injecting the data of the historical component state into a root component in a component tree corresponding to the Vue3 component;
and transmitting the data of the historical component state from the root component to the corresponding sub-component and storing the data of the historical component state into the preset state database through a provide function preset in the root component and an inject function preset in the corresponding sub-component.
5. The Vue3 component state management method of claim 4, wherein the collecting Vue3 data of historical component state of the component and injecting the data of the historical component state after the root component in the component tree corresponding to the Vue3 component further comprises:
dividing modules corresponding to the data of the historical component state, and adding a corresponding log monitoring hook function in each module;
and monitoring the state change by using a new characteristic proxy mode of the ES6 in Vue3, recording the state change, and acquiring a corresponding state change log by using the log monitoring hook function.
6. The Vue3 component state management method of any one of claims 1-5, further comprising:
and executing operation corresponding to a second target instruction through a combined interface preset in the preset state database.
7. The Vue3 component status management method of claim 6, wherein the performing an operation corresponding to a second target instruction through a combined interface preset in the preset status database comprises:
and when the data in the preset state database changes, executing the operation corresponding to the callback instruction through a subscription state interface preset in the preset state database so as to subscribe the corresponding data of the changed component state.
8. An Vue3 component status management apparatus, comprising:
the instruction acquisition module is used for acquiring a first target instruction sent through a preset interface on a target page;
the operation execution module is used for executing the operation corresponding to the first target instruction through a preset reducer function according to the first target instruction and acquiring the current component state of the Vue3 component corresponding to the target page after the operation is executed;
and the state updating module is used for updating the corresponding historical component state in a preset state database by using the current component state and sending the corresponding component state updating result to the target page.
9. An electronic device, comprising:
a memory for storing a computer program;
a processor for executing the computer program to carry out the steps of the Vue3 component state management method of any of claims 1-7.
10. A computer-readable storage medium for storing a computer program; wherein the computer program when executed by a processor implements the steps of the Vue3 component state management method of any of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210667828.7A CN115061706A (en) | 2022-06-14 | 2022-06-14 | Vue3 component state management method, device, equipment and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210667828.7A CN115061706A (en) | 2022-06-14 | 2022-06-14 | Vue3 component state management method, device, equipment and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115061706A true CN115061706A (en) | 2022-09-16 |
Family
ID=83200197
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210667828.7A Pending CN115061706A (en) | 2022-06-14 | 2022-06-14 | Vue3 component state management method, device, equipment and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115061706A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117520019A (en) * | 2024-01-05 | 2024-02-06 | 杭州玳数科技有限公司 | Component communication method and device |
-
2022
- 2022-06-14 CN CN202210667828.7A patent/CN115061706A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117520019A (en) * | 2024-01-05 | 2024-02-06 | 杭州玳数科技有限公司 | Component communication method and device |
| CN117520019B (en) * | 2024-01-05 | 2024-04-09 | 杭州玳数科技有限公司 | Component communication method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10678601B2 (en) | Orchestration service for multi-step recipe composition with flexible, topology-aware, and massive parallel execution | |
| WO2018126964A1 (en) | Task execution method and apparatus and server | |
| CN113094028B (en) | Windows desktop program development system, method and related components | |
| CN109783562B (en) | Service processing method and device | |
| US7100167B2 (en) | Method and apparatus for creating templates | |
| US9665351B2 (en) | Generating in-memory database application | |
| CN106411970A (en) | Fault handling method, device and system based on service call | |
| CN107807859A (en) | A kind of FaaS frameworks and its method of work, the system of exploitation O＆M FaaS frameworks | |
| CN112698921A (en) | Logic code operation method and device, computer equipment and storage medium | |
| CN113268260A (en) | Routing method and device for web front end | |
| US10951540B1 (en) | Capture and execution of provider network tasks | |
| CN115061706A (en) | Vue3 component state management method, device, equipment and medium | |
| CN110188308B (en) | Client automatic dotting reporting method, storage medium, equipment and system | |
| CN105404522A (en) | Method for building intelligent terminal application program, device for building intelligent terminal application program and intelligent terminal | |
| CN113656001A (en) | Platform component development method and device, computer equipment and storage medium | |
| CN110008086B (en) | Log generation method and device and client | |
| CN103067507A (en) | Internet cloud computing resource virtualization packaging system and method | |
| CN115878860A (en) | Menu generation method, device, server equipment and medium | |
| CN105610908B (en) | A kind of samba service implementing method and system based on Android device | |
| CN115964042A (en) | Menu generation method and device, storage medium and electronic equipment | |
| CN115237399A (en) | Method for collecting data, storage medium, processor and engineering vehicle | |
| Matsumoto et al. | FUJITSU Cloud Service K5 PaaS Digitalizes Enterprise Systems | |
| CN112422308A (en) | Method and device for realizing operation and maintenance monitoring | |
| Xu et al. | A PaaS based metadata-driven ETL framework | |
| US20240354238A1 (en) | User interface (ui) bound odata automation with advanced data mapping algorithim |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |