Storage configuration method, device and equipment of vue application data and storage medium

Abstract

This application relates to the field of data storage, and discloses a method, apparatus, computer device, and storage medium for configuring the storage of Vue application data. The method includes: obtaining the project code of the Vue application; parsing the project code to obtain the directory address of the business code file of the Vue application and the storage encapsulation information of local data; adding an initialization configuration file to the business code according to the directory address of the business code file; extracting a first parameter, first storage information of the first parameter, and a first parameter value corresponding to the first parameter from the storage encapsulation information of the local data based on keyword matching; constructing a first variable corresponding to the first parameter in the Vuex global variables, generating first execution information of the first variable; and writing the first execution information into the global execution information. This application can improve the efficiency of converting the data storage method of a Vue application to the Vuex storage method.

Description

Technical Field

[0001] This application relates to the field of data storage, and in particular to a method, apparatus, computer device, and storage medium for configuring storage of VUE application data. Background Technology

[0002] A common problem in current Vue projects is that, because Vuex is designed for large projects with complex data logic, its use inevitably increases the size of the resource package. Vuex data management tools have their own set of data management syntax rules, requiring developers to have relevant syntax knowledge to use them properly. However, as project scale increases and data exchange scenarios expand, data interactions between pages become extremely complex, chaotic, and difficult to manage. Transforming data storage management is a huge undertaking, requiring significant manpower to streamline the logic and rewrite it according to Vuex rules, wasting considerable time and resources and resulting in low data conversion efficiency. Summary of the Invention

[0003] The main purpose of this application is to provide a storage configuration method, apparatus, computer device, and storage medium for VUE application data, aiming to solve the problem of low conversion efficiency when converting local storage to Vuex storage.

[0004] To achieve the aforementioned objectives, this application proposes a method for configuring the storage of VUE application data, comprising:

[0005] Get the project code of the Vue application;

[0006] Parse the project code to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

[0007] An initialization configuration file is added to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information contains information on executing the Vuex global variables based on Vuex syntax;

[0008] Based on keyword matching, the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter are extracted from the storage encapsulation information of the local data.

[0009] In the Vuex global variables, a first variable corresponding to the first parameter is constructed, and the value of the first parameter is used as the variable value of the first variable. Based on the first variable, the variable value of the first variable, and the first storage information, the first execution information of the first variable is generated.

[0010] The first execution information is written into the global execution information, and the data reading or modification of the first variable is performed in the global execution information based on Vuex syntax.

[0011] Further, the step of generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first stored information includes:

[0012] Identify the first stored information and obtain the association function of the first parameter in the first stored information;

[0013] The first parameter in the association function is replaced with the first variable, and the output value of the association function is replaced with the variable value of the first variable, thereby generating the first execution information of the first variable.

[0014] Further, replacing the first parameter in the association function with the first variable includes:

[0015] Obtain the type of the associated function;

[0016] If the association function is used to retrieve a data type, the first parameter in the association function is replaced with the first variable of the first type.

[0017] If the association function modifies the data type, the first parameter in the association function is replaced with the first variable of the second type.

[0018] Furthermore, if the association function modifies the data type, replacing the first parameter in the association function with a first variable of the second type further includes:

[0019] If the associated function modifies the data type, determine whether the associated function is an asynchronous data type modification associated function;

[0020] If so, wrap the association function in a timer function and replace the first parameter in the association function with the first variable of the second type.

[0021] Further, the step of adding an initialization configuration file to the business code according to the business code file directory address includes:

[0022] Obtain the root directory address based on the directory address of the business code file;

[0023] Add an initialization configuration file to the root directory address;

[0024] Determine whether Vuex key-value pairs exist in the business code file. If they exist, confirm that the Vue application's project code imports the initialization configuration file.

[0025] Further, the step of adding an initialization configuration file to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and after the global execution information includes information on executing the Vuex global variables based on Vuex syntax, it also includes:

[0026] Construct an empty object in the Vuex global variable;

[0027] The default method in Vuex syntax is called to add the initialization configuration data to the empty object and instantiate the empty object to complete the initialization of the global variables.

[0028] Furthermore, parsing the project code to obtain the directory address of the business code files of the Vue application and the storage encapsulation information of local data includes:

[0029] Identify the data format of the project code;

[0030] The parsing script matches the corresponding template based on the data format;

[0031] The project code is parsed according to the parsing script to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

[0032] This application also provides a storage configuration device for VUE application data, including:

[0033] The data acquisition module is used to acquire the project code of the Vue application;

[0034] The project parsing module is used to parse the project code and obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

[0035] An initialization module is used to add an initialization configuration file to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information contains information on executing the Vuex global variables based on Vuex syntax;

[0036] The information extraction module is used to extract the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data based on keyword matching.

[0037] The information conversion module is used to construct a first variable corresponding to the first parameter in the Vuex global variable, and use the value of the first parameter as the variable value of the first variable, and generate the first execution information of the first variable based on the first variable, the variable value of the first variable and the first storage information;

[0038] The change execution module is used to write the first execution information into the global execution information, and to perform data reading or modification of the first variable based on Vuex syntax in the global execution information.

[0039] This application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of the storage configuration method for VUE application data described above.

[0040] This application also provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the storage configuration method for VUE application data described above.

[0041] This application provides a method for converting Vue application data from local storage to Vuex storage. First, the Vue application's project code is obtained. Then, the configuration files in the project code, including a `config.json` file, are parsed. Next, the directory addresses of the business code files (i.e., the directory addresses of the various business code files in the Vue application) and the local data storage encapsulation information (i.e., the configuration information for the local data storage method) are read from the configuration files. These local data storage configurations are then uniformly encapsulated to obtain the local data storage encapsulation information. Finally, an initialization configuration file is imported into the Vue application's project code. Based on the directory addresses of the business code files, an initialization configuration file is added to the business code. This initialization configuration file contains Vuex global variables and their global execution information. The global execution information includes information on executing the Vuex global variables based on Vuex syntax. Finally, the local data storage method is configured. The process involves decomposing and analyzing the data, then sequentially adding each parameter from the local data to the initialization configuration file. Based on keyword matching, the first parameter, its first storage information, and its corresponding first parameter value are extracted from the storage encapsulation information of the local data. A first variable corresponding to the first parameter is constructed in the Vuex global variables, and the first parameter value is used as the variable value of the first variable. First execution information for the first variable is generated based on the first variable, its variable value, and the first storage information. This first execution information is written into the global execution information. Data reading or modification of the first variable is performed in the global execution information based on Vuex syntax. This process transforms the data storage method in the Vue application from local storage to Vuex storage, thereby addressing data interaction in complex scenarios and improving the efficiency of converting the Vue application's data storage method to Vuex storage, as well as enhancing the data reading efficiency and accuracy of data interaction in the Vue application. Attached Figure Description

[0042] Figure 1 This is a schematic flowchart of an embodiment of the storage configuration method for VUE application data in this application;

[0043] Figure 2 This is a schematic diagram of an embodiment of the storage configuration device for VUE application data in this application;

[0044] Figure 3 This is a schematic block diagram of an embodiment of the computer device of this application.

[0045] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0046] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0047] Reference Figure 1 This application provides a method for configuring the storage of VUE application data, including steps S10-S60. The detailed description of each step of the method for configuring the storage of VUE application data is as follows.

[0048] S10. Obtain the project code of the Vue application.

[0049] This embodiment applies to a scenario where the local storage method used for data in a Vue application is converted to the Vuex storage method. Vuex is a state management pattern developed for Vue applications, including Vue.js applications. Vuex uses centralized storage to manage the state of all components in the Vue application and the state change data of the components. While Vue applications can use local storage to save application data, local storage cannot effectively fulfill the functionality of Vue applications when dealing with large amounts of data and complex data interactions. Therefore, this embodiment provides a tool to automatically convert the local storage method of Vue application data to the Vuex storage method, that is, to convert the data in the Vue application currently using local storage to be stored using Vuex storage. Specifically, the first step is to obtain the Vue application's project code.

[0050] S20. Parse the project code to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

[0051] In this embodiment, after obtaining the project code of the Vue application, the project code is parsed to obtain the directory address of the business code files of the Vue application and the storage encapsulation information of local data. Specifically, the configuration file in the project code is parsed, the configuration file includes a config.json file, and then the directory address of the business code files is read from the configuration file, that is, the directory address of the code files of each business function module of the Vue application is read, and the storage encapsulation information of local data is read, that is, the configuration information of the local data storage method is read. The various configuration information of the local data storage method is uniformly encapsulated to obtain the storage encapsulation information of local data.

[0052] S30. Add an initialization configuration file to the business code according to the directory address of the business code file. The initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables. The global execution information contains information on executing the Vuex global variables based on Vuex syntax.

[0053] In this embodiment, after obtaining the directory address of the business code file of the Vue application and the storage encapsulation information of local data, an initialization configuration file is added to the business code according to the directory address of the business code file. That is, the initialization configuration file is introduced into the project code of the Vue application. Specifically, the initialization configuration file includes a Vuex library file, that is, the Vuex library file is introduced into the Vue application. The Vuex library file provides a method for Vuex data management. Further, the initialization configuration file also includes a store file. The store file contains a state object for managing global variables, an actions object for triggering actions to change global variables, and mutations objects for executing modification actions. That is, the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables. The global execution information contains information on executing the Vuex global variables based on Vuex syntax.

[0054] S40. Extract the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data according to keyword matching.

[0055] In this embodiment, when adding an initialization configuration file to the business code based on the business code file directory address, it is necessary to decompose and analyze the storage method of the local data. Then, each parameter in the local data is added to the initialization configuration file in sequence. Specifically, the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter are extracted from the storage encapsulation information of the local data based on keyword matching. Specifically, by performing keyword search on the syntax localStorage.getItem and localStorage.setItem, matching local storage operation code is retrieved from the storage encapsulation information of the Vue application's project code. The first input parameter when calling the above two methods is extracted to obtain the first parameter. Then, the method name of the corresponding encapsulated method is found based on the first parameter to obtain the first storage information of the first parameter, and the current value of the first parameter is obtained as the first parameter value corresponding to the first parameter.

[0056] S50. Construct a first variable corresponding to the first parameter in the Vuex global variables, and use the value of the first parameter as the variable value of the first variable. Generate the first execution information of the first variable based on the first variable, the variable value of the first variable and the first storage information.

[0057] In this embodiment, after obtaining the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter, it is necessary to write the first parameter and associated information into the initialization configuration file. Specifically, a first variable corresponding to the first parameter is constructed in the Vuex global variables, and then the first parameter value is used as the variable value of the first variable. The first execution information of the first variable is generated based on the first variable, the variable value of the first variable, and the first storage information. In one implementation, the first parameter in the first storage information is converted into the first variable, and then the first parameter value is converted into the value of the first variable. Then, the first execution information of the first variable is generated based on the first variable, the variable value of the first variable, and the first storage information.

[0058] S60. Write the first execution information into the global execution information, and perform data reading or modification of the first variable based on Vuex syntax in the global execution information.

[0059] In this embodiment, after generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first storage information, the first execution information is written into the global execution information. That is, the first storage information is replaced with the first execution information based on Vuex syntax and written into the global execution information. This allows the information of the Vuex global variable to be executed based on Vuex syntax in the global execution information, including reading or modifying the data of the first variable. In other words, the data reading or modification of the first variable is performed based on Vuex syntax in the global execution information. This completes the transformation of the data storage method based on local storage in the Vue application into a data storage method based on Vuex storage. This addresses the data interaction in complex scenarios of the Vue application, improves the efficiency of the transformation of the Vue application's data storage method into the Vuex storage method, and improves the data reading efficiency and data interaction accuracy of the Vue application.

[0060] This embodiment provides a method for converting Vue application data from local storage to Vuex storage. First, the Vue application's project code is obtained. Then, the configuration file in the project code, including a `config.json` file, is parsed. Next, the directory addresses of the business code files (i.e., the directory addresses of the various business code files in the Vue application) and the local data storage encapsulation information (i.e., the configuration information for the local data storage method) are read from the configuration file. These configuration information is then uniformly encapsulated to obtain the local data storage encapsulation information. Finally, the initialization configuration file is imported into the Vue application's project code. Based on the directory addresses of the business code files, the initialization configuration file is added to the business code. The initialization configuration file contains Vuex global variables and their global execution information. The global execution information includes information on executing the Vuex global variables based on Vuex syntax. Finally, the local data storage method is configured. The process involves decomposing and analyzing the data, then sequentially adding each parameter from the local data to the initialization configuration file. Based on keyword matching, the first parameter, its first storage information, and its corresponding first parameter value are extracted from the storage encapsulation information of the local data. A first variable corresponding to the first parameter is constructed in the Vuex global variables, and the first parameter value is used as the variable value of the first variable. First execution information for the first variable is generated based on the first variable, its variable value, and the first storage information. This first execution information is written into the global execution information. Data reading or modification of the first variable is performed in the global execution information based on Vuex syntax. This process transforms the data storage method in the Vue application from local storage to Vuex storage, thereby addressing data interaction in complex scenarios and improving the efficiency of converting the Vue application's data storage method to Vuex storage, as well as enhancing the data reading efficiency and accuracy of data interaction in the Vue application.

[0061] In one embodiment, generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first stored information includes:

[0062] Identify the first stored information and obtain the association function of the first parameter in the first stored information;

[0063] The first parameter in the association function is replaced with the first variable, and the output value of the association function is replaced with the variable value of the first variable, thereby generating the first execution information of the first variable.

[0064] In this embodiment, during the process of generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first storage information, the first storage information is first identified, and the associated function of the first parameter in the first storage information is obtained. Specifically, by matching keywords one by one, a parameter is first identified as the first parameter. Then, the function method associated with the first parameter is found and defined as the associated function. The first parameter in the associated function is then replaced with the first variable, and the output value of the associated function is replaced with the variable value of the first variable. This transforms all function methods related to the first parameter in the first storage information into function methods with the first variable, thereby generating the first execution information of the first variable. This replaces the original code that operates on local data storage with code that operates on data using Vuex syntax, improving the efficiency of the conversion from local storage to Vuex storage.

[0065] In one embodiment, replacing the first parameter in the association function with the first variable includes:

[0066] Obtain the type of the associated function;

[0067] If the association function is used to retrieve a data type, the first parameter in the association function is replaced with the first variable of the first type.

[0068] If the association function modifies the data type, the first parameter in the association function is replaced with the first variable of the second type.

[0069] In this embodiment, during the process of replacing the first parameter in the association function with the first variable, different association functions have different functions. Some association functions only perform data retrieval, while others perform data modification. By obtaining the type of the association function, different first variables are replaced for association functions of different types. Specifically, after obtaining the type of the association function, if the association function is for retrieving data type, the first parameter in the association function is replaced with the first variable of the first type. For example, the association function that originally used localStorage.getItem to retrieve local stored data is modified to retrieve stored data through the first variable of this.variable name. The association function that originally used localStorage.setItem to modify local stored data is modified to modify the data through the first variable of this.$store.dispatch('variable name', value of the modified variable), and the value of the modified variable is the value of the first variable. Thus, the association function is quickly modified according to different types, and the original code for operating local data storage is replaced with code for operating data through Vuex syntax, improving the accuracy of the association function and the accuracy of data conversion.

[0070] In one embodiment, adding an initialization configuration file to the business code based on the business code file directory address includes:

[0071] Obtain the root directory address based on the directory address of the business code file;

[0072] Add an initialization configuration file to the root directory address;

[0073] Determine whether Vuex key-value pairs exist in the business code file. If they exist, confirm that the Vue application's project code imports the initialization configuration file.

[0074] In this embodiment, during the process of adding an initialization configuration file to the business code based on the business code file directory address, the root directory address is obtained based on the business code file directory address, i.e., the root directory of the Vue application project is located. Then, the initialization configuration file is added to the root directory address. In one implementation, the build command "npm run pa-localStorage-transform-vuex" is executed to find the root directory address and add the initialization configuration file to the root directory address. Then, it is determined whether Vuex key-value pairs exist in the business code file. Specifically, by searching the dependencies object in the package.json file of the project, it is determined whether the dependencies object contains Vuex key-value pairs. If they exist, it means that the Vuex library file has been imported into the project, i.e., it is confirmed that the Vue application project code has imported the initialization configuration file, thereby completing the import of the initialization configuration file to accurately transform the data storage method of the Vue application.

[0075] In one embodiment, the step of adding an initialization configuration file to the business code based on the business code file directory address; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information includes information on executing the Vuex global variables based on Vuex syntax, and further includes:

[0076] Construct an empty object in the Vuex global variable;

[0077] The default method in Vuex syntax is called to add the initialization configuration data to the empty object and instantiate the empty object to complete the initialization of the global variables.

[0078] In this embodiment, after adding the initialization configuration file to the business code according to the business code file directory address, since the Vuex global variables have not yet been allocated memory space, they cannot utilize additional memory resources for computation. Therefore, the global variables need to be initialized. Specifically, firstly, an empty object is constructed in the Vuex global variables, and then a preset method in the Vuex syntax is called to add the initialization configuration data to the empty object to instantiate the empty object, thereby completing the initialization of the global variables. For example, the initialization configuration data is added to the empty object by calling the createStore method, and the Vuex global variables are instantiated using Vuex data management to complete the initialization of the global variables. After initialization, the global variables can better utilize memory resources for computation, thereby improving the efficiency of data transformation.

[0079] In one embodiment, if the association function is a modified data type, replacing the first parameter in the association function with a first variable of the second type further includes:

[0080] If the associated function modifies the data type, determine whether the associated function is an asynchronous data type modification associated function;

[0081] If so, wrap the association function in a timer function and replace the first parameter in the association function with the first variable of the second type.

[0082] In this embodiment, the associated function of the data modification type can perform asynchronous data modification or non-asynchronous data modification. When determining if the associated function is a data modification type and replacing the first parameter in the associated function with a first variable of the second type, if the associated function is a data modification type, it is further determined whether it is an associated function for asynchronous data modification. In one implementation, this is done by determining whether the outer layer of the original associated function contains a timer function keyword, such as the keyword "setTimeout". If so, the associated function is determined to be an asynchronous data modification type associated function. If the associated function is an asynchronous data modification type associated function, during the process of replacing the first parameter in the associated function with a first variable of the second type, the associated function also needs to be wrapped in a timer function, and the first parameter in the associated function needs to be replaced with a first variable of the second type. For example, if the associated function is to modify data with a 3-second delay, then the associated function needs to be wrapped in the timer function `setTimeout` code, and the first parameter in the associated function needs to be replaced with a first variable of the second type. After modification, it becomes:

[0083] setTimeout(()=>{

[0084] store.commit('first variable name', first variable value)

[0085] },3000),.

[0086] In one embodiment, parsing the project code to obtain the directory address of the business code files of the Vue application and the storage encapsulation information of local data includes:

[0087] Identify the data format of the project code;

[0088] The parsing script matches the corresponding template based on the data format;

[0089] The project code is parsed according to the parsing script to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

[0090] In this embodiment, during the parsing of the project code, the data format of the project code is first identified. Based on the data format, the development tool used to develop the project can be identified. Different development tools have different templates during development. The parsing script corresponding to the template is matched according to the data format. Then, the project code is parsed according to the parsing script to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data, thereby improving the parsing efficiency of project code under different data formats.

[0091] Reference Figure 2 This application also provides a storage configuration device for VUE application data, comprising:

[0092] Data acquisition module 10 is used to acquire the project code of the Vue application;

[0093] Project parsing module 20 is used to parse the project code and obtain the directory address of the business code file of the Vue application and the storage encapsulation information of local data;

[0094] An initialization module 30 is used to add an initialization configuration file to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information contains information on executing the Vuex global variables based on Vuex syntax;

[0095] Information extraction module 40 is used to extract the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data according to keyword matching;

[0096] The information conversion module 50 is used to construct a first variable corresponding to the first parameter in the Vuex global variable, and use the value of the first parameter as the variable value of the first variable, and generate the first execution information of the first variable based on the first variable, the variable value of the first variable and the first storage information;

[0097] The change execution module 60 is used to write the first execution information into the global execution information, and to perform data reading or modification of the first variable based on Vuex syntax in the global execution information.

[0098] As described above, it can be understood that each component of the VUE application data storage configuration apparatus proposed in this application can implement the function of any of the VUE application data storage configuration methods described above.

[0099] In one embodiment, generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first stored information includes:

[0100] Identify the first stored information and obtain the association function of the first parameter in the first stored information;

[0101] The first parameter in the association function is replaced with the first variable, and the output value of the association function is replaced with the variable value of the first variable, thereby generating the first execution information of the first variable.

[0102] In one embodiment, replacing the first parameter in the association function with the first variable includes:

[0103] Obtain the type of the associated function;

[0104] If the association function is used to retrieve a data type, the first parameter in the association function is replaced with the first variable of the first type.

[0105] If the association function modifies the data type, the first parameter in the association function is replaced with the first variable of the second type.

[0106] In one embodiment, if the association function is a modified data type, replacing the first parameter in the association function with a first variable of the second type further includes:

[0107] If the associated function modifies the data type, determine whether the associated function is an asynchronous data type modification associated function;

[0108] If so, wrap the association function in a timer function and replace the first parameter in the association function with the first variable of the second type.

[0109] In one embodiment, adding an initialization configuration file to the business code based on the business code file directory address includes:

[0110] Obtain the root directory address based on the directory address of the business code file;

[0111] Add an initialization configuration file to the root directory address;

[0112] Determine whether Vuex key-value pairs exist in the business code file. If they exist, confirm that the Vue application's project code imports the initialization configuration file.

[0113] In one embodiment, the step of adding an initialization configuration file to the business code based on the business code file directory address; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information includes information on executing the Vuex global variables based on Vuex syntax, and further includes:

[0114] Construct an empty object in the Vuex global variable;

[0115] The default method in Vuex syntax is called to add the initialization configuration data to the empty object and instantiate the empty object to complete the initialization of the global variables.

[0116] In one embodiment, parsing the project code to obtain the directory address of the business code files of the Vue application and the storage encapsulation information of local data includes:

[0117] Identify the data format of the project code;

[0118] The parsing script matches the corresponding template based on the data format;

[0119] The project code is parsed according to the parsing script to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

[0120] Reference Figure 3 This application also provides a computer device, which can be a mobile terminal, and its internal structure can be as follows: Figure 3 As shown, the computer device includes a processor, memory, network interface, display device, and input device connected via a system bus. The network interface is used for communication with external terminals via a network connection. The input device is used to receive user input. The processor is designed to provide computing and control capabilities. The memory includes a storage medium. This storage medium stores the operating system, computer programs, and a database. The database is used to store data. When the computer program is executed by the processor, it implements a storage configuration method for Vue application data.

[0121] The processor described above executes the storage configuration method for Vue application data, including: obtaining the project code of the Vue application; parsing the project code to obtain the directory address of the business code file of the Vue application and the storage encapsulation information of local data; adding an initialization configuration file to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, the global execution information containing information on executing the Vuex global variables based on Vuex syntax; extracting the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data according to keyword matching; constructing a first variable corresponding to the first parameter in the Vuex global variables, and using the first parameter value as the variable value of the first variable; generating first execution information of the first variable according to the first variable, the variable value of the first variable, and the first storage information; writing the first execution information into the global execution information, and performing data reading or modification of the first variable based on Vuex syntax in the global execution information.

[0122] The computer device provides a method for converting Vue application data from local storage to Vuex storage. First, the Vue application's project code is obtained. Then, the configuration file (including a `config.json` file) in the project code is parsed. Next, the directory addresses of the business code files (i.e., the directory addresses of the various business code files in the Vue application) and the local data storage encapsulation information (i.e., the configuration information for the local data storage method) are read from the configuration file. These configuration information is then uniformly encapsulated to obtain the local data storage encapsulation information. Finally, the initialization configuration file is imported into the Vue application's project code. Based on the directory addresses of the business code files, the initialization configuration file is added to the business code. The initialization configuration file contains Vuex global variables and global execution information for these global variables. The global execution information includes information on executing the Vuex global variables based on Vuex syntax. Finally, the local data storage method is... The data is decomposed and analyzed, and then each parameter in the local data is added to the initialization configuration file in sequence. Based on keyword matching, the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter are extracted from the storage encapsulation information of the local data. A first variable corresponding to the first parameter is constructed in the Vuex global variable, and the first parameter value is used as the variable value of the first variable. Based on the first variable, the variable value of the first variable, and the first storage information, the first execution information of the first variable is generated. The first execution information is written into the global execution information. In the global execution information, data reading or modification of the first variable is performed based on Vuex syntax. This completes the transformation of the data storage method based on local storage in the Vue application into a data storage method based on Vuex storage. This addresses the data interaction in complex scenarios of the Vue application, improves the efficiency of the transformation of the Vue application's data storage method into the Vuex storage method, and improves the data reading efficiency and data interaction accuracy of the Vue application.

[0123] One embodiment of this application also provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by the processor, it implements a method for configuring the storage of Vue application data, including the following steps: obtaining the project code of the Vue application; parsing the project code to obtain the directory address of the business code file of the Vue application and the storage encapsulation information of local data; adding an initialization configuration file to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, the global execution information containing information on executing the Vuex global variables based on Vuex syntax; extracting the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data according to keyword matching; constructing a first variable corresponding to the first parameter in the Vuex global variables and using the first parameter value as the variable value of the first variable; generating first execution information of the first variable according to the first variable, the variable value of the first variable, and the first storage information; writing the first execution information into the global execution information, and performing data reading or modification of the first variable based on Vuex syntax in the global execution information.

[0124] The computer-readable storage medium provides a method for converting Vue application data from local storage to Vuex storage. First, the Vue application's project code is obtained. Then, the configuration file in the project code, including a `config.json` file, is parsed. Next, the directory addresses of the business code files (i.e., the directory addresses of the various business code files in the Vue application) and the local data storage encapsulation information (i.e., the configuration information for the local data storage method) are read from the configuration file. These configuration information is then uniformly encapsulated to obtain the local data storage encapsulation information. Finally, the initialization configuration file is imported into the Vue application's project code. Based on the directory addresses of the business code files, the initialization configuration file is added to the business code. The initialization configuration file contains Vuex global variables and global execution information for these global variables. The global execution information includes information on executing the Vuex global variables based on Vuex syntax. Finally, the local data storage method is... The process involves data decomposition and analysis, followed by the sequential addition of each parameter from the local data to the initialization configuration file. Based on keyword matching, the first parameter, its first storage information, and its corresponding first parameter value are extracted from the storage encapsulation information of the local data. A first variable corresponding to the first parameter is constructed in the Vuex global variables, and the first parameter value is used as the variable value of the first variable. First execution information for the first variable is generated based on the first variable, its variable value, and the first storage information. This first execution information is written into the global execution information. Data reading or modification of the first variable is performed in the global execution information based on Vuex syntax. This process transforms the data storage method in the Vue application from local storage to Vuex storage, thereby addressing data interaction in complex scenarios and improving the efficiency of converting Vue application data storage to Vuex storage, as well as enhancing the data reading efficiency and accuracy of data interaction in the Vue application.

[0125] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods.

[0126] Any references to memory, storage, database or other media used in this application and in the embodiments may include non-volatile or volatile memory.

[0127] Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual-speed SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0128] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, apparatus, article, or method. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, apparatus, article, or method that includes that element.

[0129] The above description is only a preferred embodiment of this application and does not limit the patent scope of this application.

[0130] Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of this application.

Claims

1. A method for configuring data storage in a Vue application, characterized in that, include: Get the project code of the Vue application; Parse the project code to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data. An initialization configuration file is added to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information contains information on executing the Vuex global variables based on Vuex syntax; Based on keyword matching, extract the first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data; In the Vuex global variables, a first variable corresponding to the first parameter is constructed, and the value of the first parameter is used as the variable value of the first variable. Based on the first variable, the variable value of the first variable, and the first storage information, the first execution information of the first variable is generated. The first execution information is written into the global execution information, and the data reading or modification of the first variable is performed in the global execution information based on Vuex syntax. The step of adding an initialization configuration file to the business code according to the business code file directory address includes: Obtain the root directory address based on the directory address of the business code file; Add an initialization configuration file to the root directory address; Determine whether Vuex key-value pairs exist in the business code file. If they exist, confirm that the Vue application's project code imports the initialization configuration file. Specifically, by searching the dependencies object in the package.json file of the project, determine whether the dependencies object contains Vuex key-value pairs. The step involves adding an initialization configuration file to the business code based on the directory address of the business code file. The initialization configuration file contains Vuex global variables and global execution information for these global variables. After the global execution information includes information about executing the Vuex global variables based on Vuex syntax, it also includes: Construct an empty object in the Vuex global variable; The initialization configuration data is added to the empty object by calling the createStore method, and the Vuex global variable is instantiated for Vuex data management to complete the initialization of the global variable; The step of generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first stored information includes: Identify the first stored information and obtain the association function of the first parameter in the first stored information; The first parameter in the association function is replaced with the first variable, and the output value of the association function is replaced with the variable value of the first variable, thereby generating the first execution information of the first variable.

2. The method for storing and configuring VUE application data according to claim 1, characterized in that, The step of replacing the first parameter in the association function with the first variable includes: Obtain the type of the associated function; If the association function is used to retrieve a data type, the first parameter in the association function is replaced with the first variable of the first type. If the association function modifies the data type, the first parameter in the association function is replaced with the first variable of the second type.

3. The method for storing and configuring VUE application data according to claim 2, characterized in that, If the association function modifies the data type, replacing the first parameter in the association function with a first variable of the second type further includes: If the associated function modifies the data type, determine whether the associated function is an asynchronous data type modification associated function; If so, wrap the association function in a timer function and replace the first parameter in the association function with the first variable of the second type.

4. The method for storing and configuring VUE application data according to claim 1, characterized in that, The process of parsing the project code to obtain the directory address of the business code files of the Vue application and the storage encapsulation information of local data includes: Identify the data format of the project code; The parsing script matches the corresponding template based on the data format; The project code is parsed according to the parsing script to obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data.

5. A storage configuration apparatus for VUE application data, used to implement the method according to any one of claims 1-4, characterized in that, include: The data acquisition module is used to acquire the project code of the Vue application; The project parsing module is used to parse the project code and obtain the directory address of the business code file of the Vue application and the storage and encapsulation information of local data. An initialization module is used to add an initialization configuration file to the business code according to the directory address of the business code file; the initialization configuration file contains Vuex global variables and global execution information of the Vuex global variables, and the global execution information contains information on executing the Vuex global variables based on Vuex syntax; The information extraction module is used to extract a first parameter, the first storage information of the first parameter, and the first parameter value corresponding to the first parameter from the storage encapsulation information of the local data based on keyword matching. The information conversion module is used to construct a first variable corresponding to the first parameter in the Vuex global variable, and use the value of the first parameter as the variable value of the first variable, and generate the first execution information of the first variable based on the first variable, the variable value of the first variable and the first storage information; The execution module is modified to write the first execution information into the global execution information, and to perform data reading or modification of the first variable based on Vuex syntax in the global execution information; The step of adding an initialization configuration file to the business code according to the business code file directory address includes: Obtain the root directory address based on the directory address of the business code file; Add an initialization configuration file to the root directory address; Determine whether Vuex key-value pairs exist in the business code file. If they exist, confirm that the Vue application's project code imports the initialization configuration file. Specifically, by searching the dependencies object in the package.json file of the project, determine whether the dependencies object contains Vuex key-value pairs. The step involves adding an initialization configuration file to the business code based on the directory address of the business code file. The initialization configuration file contains Vuex global variables and global execution information for these global variables. After the global execution information includes information about executing the Vuex global variables based on Vuex syntax, it also includes: Construct an empty object in the Vuex global variable; The initialization configuration data is added to the empty object by calling the createStore method, and the Vuex global variable is instantiated for Vuex data management to complete the initialization of the global variable; The step of generating the first execution information of the first variable based on the first variable, the variable value of the first variable, and the first stored information includes: Identify the first stored information and obtain the association function of the first parameter in the first stored information; The first parameter in the association function is replaced with the first variable, and the output value of the association function is replaced with the variable value of the first variable, thereby generating the first execution information of the first variable.

6. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the storage configuration method for VUE application data according to any one of claims 1 to 4.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the storage configuration method for VUE application data according to any one of claims 1 to 4.

Images