A method and device for local storage of Vuex state library data
By merging, verifying and filtering Vuex state data, the problem of data loss after the page is closed in Vuex state management is solved, persistent storage of data and resource optimization are achieved, and user experience and development convenience are improved.
Patent Information
- Application Number
- CN202510933945.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-08
- Publication Date
- 2025-09-30
- Estimated Expiration
- 2045-07-08
AI Technical Summary
The existing Vuex state management loses data after the web page is closed, resulting in an interruption in user experience. In addition, the existing local storage solution is highly invasive, lacks a unified management mechanism, and occupies memory resources.
By obtaining browser history data, merging and verifying it with the current Vuex state library data, monitoring data changes, filtering important data and writing it to local storage, using version migration functions to handle compatibility, and calculating data access weight to filter storage.
It realizes the persistence of Vuex state data after the page is closed, reduces server requests, improves user experience, saves memory resources, and provides development and debugging convenience.
Smart Images
Figure CN120430283B_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the technical field of front-end application data management, and in particular relates to a method and device for local storage of Vuex state library data. Background Art
[0002] In front-end technology, the Vue framework can handle web application development in many scenarios. Its comprehensive ecosystem greatly improves development convenience. In particular, the Vuex state management library solves the problem of data transfer between components and centrally manages the state of all components in the application.
[0003] The existing Vuex approach to state data management relies on the computer's memory storage, a temporary data storage method that exists only while the program is running. When the web page is refreshed or closed, the state data is lost, resulting in a disrupted user experience, such as login status and user information. Therefore, persisting state can improve the user experience, reduce unnecessary server-side requests, and increase the loading speed of the product interface. Existing technical solutions achieve local data storage by manually storing it to disk within the relevant page logic. This fragmented logic makes the code highly invasive and lacks a unified management mechanism. However, local storage space is limited, and localizing all state data will occupy memory resources. Summary of the Invention
[0004] The purpose of this application is to provide a method for local storage of Vuex state library data, aiming to solve the problem that Vuex data is lost when the web page is closed.
[0005] To achieve the above objectives, this application proposes a method for local storage of Vuex state library data, which includes:
[0006] 1. A method for local storage of Vuex state library data, characterized in that the method includes:
[0007] S1. Get valid historical data in the browser;
[0008] S2. Initialize the merged historical data with the current Vuex state library data;
[0009] S3. Monitor whether the merged data status has changed. If so, proceed to the next step. Otherwise, the current merged data does not need to be localized.
[0010] S4. Filter and process the merged data and write it to the browser's local storage.
[0011] Preferably, including:
[0012] First, deserialize the historical data into a string using JSON.parse(), and then verify the processed data using the try catch function.
[0013] If qualified, further determine whether the historical data meets the version requirements of the current Vuex operating environment. If not, convert the historical data into valid data that meets the version requirements, otherwise, discard it.
[0014] Preferably, including:
[0015] By calling the replaceState() function, the merged data is passed in as a parameter for initialization.
[0016] Preferably, the method for monitoring whether the merged data status has changed is:
[0017] By calling the subscribe() function, the object of mutation.type is monitored to see if it is equal to the trigger type. If so, the data has changed.
[0018] Preferably, step S3 includes:
[0019] Temporarily save the merged initialization data snapshot, and save the current operation log when the merged data status changes.
[0020] Preferably, step S4 includes:
[0021] The top five data access weights are selected as retained data. The access weight is calculated as follows:
[0022] Wn = α * current access impact + (1-α) * Wn-1;
[0023] Current visit impact = (number of visits weight × 0.6 + freshness weight × 0.4) / 2;
[0024] Freshness weight = 1 - (current access time - last access time) / maximum time window;
[0025] α is the smoothing coefficient, ranging from 0 to 1, with a default of 0.3; Wn-1 is the historical weight.
[0026] A system for local storage of Vuex state library data, including:
[0027] Data parsing unit, obtains valid historical data in the browser;
[0028] Data initialization unit, which merges historical data with the data of the current Vuex state library and initializes it;
[0029] The data subscription unit monitors whether the merged data status has changed. If so, it proceeds to the next step. Otherwise, the current merged data does not need to be localized.
[0030] The data local storage unit filters and processes the merged data and writes it into the browser local storage.
[0031] A storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the method according to any one of claims 1 to 6.
[0032] A computer device comprises a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 6 when executing the computer program.
[0033] One or more technical solutions proposed in this application have at least the following technical effects:
[0034] By continuously updating the MCS information in the time slot table of the node, the adaptive adaptability of the node MCS is enhanced;
[0035] It can effectively utilize the saved historical status data and automatically upgrade the non-compliant data version to the data version that complies with the current running program;
[0036] You can temporarily save a snapshot of the merged initialization data. When monitoring changes in the merged data state, save the current operation log to facilitate debugging by developers.
[0037] In order to prevent storage overflow, the access weight of data is calculated through multiple dimensions of time and access frequency to save important data. BRIEF DESCRIPTION OF THE DRAWINGS
[0038] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the structures shown in these drawings without paying any creative work.
[0039] Figure 1 This is a schematic flow chart illustrating a method for local storage of Vuex state library data according to an embodiment of the present invention;
[0040] Figure 2 It is a system diagram for local storage of Vuex state library data.
[0041] The purpose, features and advantages of the present invention will be further described with reference to the accompanying drawings and in conjunction with the embodiments. DETAILED DESCRIPTION
[0042] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making any creative efforts shall fall within the scope of protection of the present invention.
[0043] It should be noted that if the embodiments of the present invention involve directional indications (such as up, down, left, right, front, back...), the directional indications are only used to explain the relative position relationship, movement status, etc. between the components in a certain specific posture. If the specific posture changes, the directional indications will also change accordingly.
[0044] In addition, if there are descriptions involving "first", "second", etc. in the embodiments of the present invention, the descriptions of "first", "second", etc. are only for descriptive purposes and cannot be understood as indicating or suggesting their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features limited to "first" and "second" may explicitly or implicitly include at least one of such features. In addition, if "and / or" or "and / or" appears in the full text, its meaning includes three parallel solutions. Taking "A and / or B" as an example, it includes solution A, solution B, or solutions that satisfy both A and B. In addition, the technical solutions between the various embodiments can be combined with each other, but it must be based on the ability of ordinary technicians in this field to implement. When the combination of technical solutions is mutually contradictory or cannot be implemented, it should be deemed that such a combination of technical solutions does not exist and is not within the scope of protection required by the present invention.
[0045] Example 1:
[0046] like Figure 1 As shown in the flowchart of a method for local storage of Vuex state library data, in order to solve the technical problem that the synchronization frequency of the frequency hopping sequence using the frequency hopping mode of the drone self-organizing network cannot adapt to the time variation of the channel, this embodiment provides a method for local storage of Vuex state library data, including the following steps:
[0047] In simple terms, vuex is a tool officially provided by vue that is independent of the component system and manages public data. It uses centralized storage to manage the status of all components of the application and solves the communication between multiple components.
[0048] Create a Vuex instance object as store, and inject the method of the present invention into the Vuex instance through the plugins attribute of the instance.
[0049] During the local storage process of the browser, the data may be cleared or the data structure may be damaged. When the historical status data is read from the local storage and used directly, it will cause the program to run with an error. In order to ensure the smooth execution of the method of the present invention and enhance the robustness of the function body and the fault tolerance of the data, it is necessary to parse and verify the read historical data.
[0050] S1. Get valid historical data in the browser;
[0051] First, read the historical data from the local storage of the user's browser, then verify the integrity of the data structure, and then continue to parse the data version for compatibility with the version of the current Vuex runtime environment application, and finally output legal and valid JSON format data.
[0052] That is, firstly, the synthesized data is deserialized into a string through JSON.parse(), and then the processed data is verified to be qualified through the try catch function;
[0053] If requirements or data structure changes require upward compatibility of historical data, the version migration function is used to restore and enable historical data. This method involves executing the migration script along the version migration chain to update the data structure.
[0054] If qualified, it is further determined whether the historical data meets the version requirements of the current Vuex operating environment. If not, the historical data is converted into valid data that meets the version requirements, otherwise it is discarded.
[0055] The function to convert historical data to the current version is as follows: Assume that the original version is: historical data version: 1.0.0, and the current program version is 1.1.0 or 1.2.0. The migration function from 1.0.0 to 1.1.0 or from 1.1.0 to 1.2.0 is:
[0056] / / Version migration function / /
[0057] const migrationRules = {
[0058] '1.0.0 → 1.1.0': (state) => {
[0059] let newSt = {...state,userName: state.name,theme:'dark'};
[0060] delete newSt.name;
[0061] return newSt;
[0062] },
[0063] '1.1.0 → 1.2.0': (state) => {
[0064] let newSt = { ...state,createrName:state.userName,settings: { theme:'dark'}};
[0065] delete newSt.userName;
[0066] delete newSt.theme;
[0067] return newSt
[0068] }
[0069] };
[0070] Assume the initial state is starting from version 1.0.0:
[0071] ①Original data status (v1.0.0): {"name":"developer","age":20}.
[0072] ② Apply the first migration version migration function (→ v1.1.0), use the spread operator to copy all properties, add userName (the value comes from name), add a default theme, delete unnecessary properties, and generate the state {"age":20,userName:"developer","theme":"dark"}.
[0073] ③ Apply the second migration (→ v1.2.0), use the spread operator to copy all properties, add creatorName (the value comes from userName), move theme to the settings object, delete unnecessary properties, and generate the state {"age":20,createrName:"developer",settings:{"theme":"dark"}}.
[0074] This gradual migration clarifies the changes between each version and makes data upward compatible in a non-destructive manner.
[0075] S2. Initialize the merged historical data with the current Vuex state library data;
[0076] By calling the replaceState() function, the merged data is passed in as a parameter for initialization.
[0077] this.$store.replaceState(store_State_init); / / store_State_init is historical data.
[0078] S3. Monitor whether the merged data status has changed. If so, proceed to the next step. Otherwise, the current merged data does not need to be localized.
[0079] Since the data of the Vuex state library is modified by calling mutations to modify the public data defined in the state, the subscribe() function can observe mutation.type by calling the subscribe() function to listen to whether the object of mutation.type is equal to the trigger type. If so, the data has changed.
[0080] For example:
[0081] / / Define mutations (the only way to modify state)
[0082] const mutations = {
[0083] increment(state) {
[0084] state.count++
[0085] },
[0086] setUserInfo(state, info) {
[0087] state.userInfo = info
[0088] }
[0089] }
[0090] / / Call the subscribe function to listen
[0091] this.$store.subscribe((mutation, state) => {
[0092] if (mutation.type === 'increment') { / / Check if the mutation type is 'increment' / /
[0093] console.log('count increased:', state.count);
[0094] }
[0095] Furthermore, in order to analyze and record each change in state data, print it to the console for development and debugging. Temporarily save the merged initialization data snapshot. When monitoring the merged data state changes, save the current operation log. Specifically including:
[0096] When the merged data is initialized, the first state library data is temporarily saved, and a deep copy of the data is made to obtain the full snapshot prevState of the initial state library. When the state library data changes, the updated state object is assigned to the nextState variable, and the difference algorithm DeepDiff (existing dependency packages can be used) is used to obtain the difference between the state library data before and after, and then nextState is assigned to prevState. When the state library data changes again, the value of nextState is assigned to prevState, and the updated state object is assigned to nextState. The difference algorithm DeepDiff is used again to compare the differences between the state library data before and after. This cycle continues, and each data change will update and save the operation log: The specific contents are as follows:
[0097] interface ChangeLog {
[0098] timestamp: number; / / change timestamp
[0099] type: string; / / mutation operation type
[0100] payload:any; / / mutation event payload
[0101] prevState: any; / / value before state change
[0102] nextState: any; / / value after state change
[0103] diff: Object; / / The difference between the state before and after
[0104] }
[0105] S4. Filter and process the merged data and write it to the browser's local storage.
[0106] To reduce storage resource usage, minimize data read and write times, and improve data processing performance, we allow partial state data to be stored locally, rather than in full. By passing in the data path to be stored locally, we filter the state data under that path. We call the browser's local storage method to store the filtered data locally. This stored data will serve as the data source the next time the application is launched.
[0107] Since the data to be localized is affected by user access, for example, although some data has been monitored for changes, its usage frequency is low. Therefore, the exponential smoothing method can be used to filter out data with higher activity and select data with a high current access weight as the retained data.
[0108] The data access weight calculation method is:
[0109] W n = α * current visit impact + (1-α) * W n-1
[0110] W n-1 is the historical weight. The initial value is 0;
[0111] α is the smoothing coefficient, ranging from 0 to 1, with a default of 0.3. A larger value indicates more emphasis on the latest access data, while a smaller value indicates more emphasis on historical access patterns.
[0112] Current access impact refers to the weight of current data access, which is affected by the weight of the number of data accesses and freshness.
[0113] Current visit impact = (number of visits weight × 0.6 + freshness weight × 0.4) / 2.
[0114] Freshness weight = 1 - (current access time - last access time) / maximum time window.
[0115] The maximum window time is 30 days.
[0116] For example:
[0117] export default function(options){
[0118] options = options || {};
[0119] const storage = options.storage || (window && window.localStorage);
[0120] const key = options.key || "vuex";
[0121] / / New: Smoothing coefficient configuration (between 0-1)
[0122] const SMOOTHING_FACTOR = options.smoothingFactor || 0.3; / / Default 0.3
[0123] / / Get or initialize usage statistics
[0124] const usageStats = (options.getState || getState)(`${key}_usage`) ||{};
[0125] function updateUsageStats(path) {
[0126] const now = Date.now();
[0127] const maxAge = 30 * 24 * 60 * 60 * 1000; / / 30 days
[0128] if (!usageStats[path]) {
[0129] usageStats[path] = {
[0130] count: 1,
[0131] lastUsed: now,
[0132] smoothedWeight: 0 / / Initial weight
[0133] };
[0134] return;
[0135] }
[0136] / / Calculate the time decay factor (0-1)
[0137] const ageFactor = Math.min(1, (now - usageStats[path].lastUsed) / maxAge);
[0138] const recency = 1 - ageFactor; / / The newer the value, the larger the value
[0139] / / Calculate new weights using exponential smoothing
[0140] / / W = α * current visit impact + (1-α) * historical weight
[0141] const currentImpact = (usageStats[path].count * 0.6 + recency * 0.4) / 2;
[0142] usageStats[path].smoothedWeight =
[0143] SMOOTHING_FACTOR * currentImpact +
[0144] (1 - SMOOTHING_FACTOR) * usageStats[path].smoothedWeight;
[0145] / / Update count and time
[0146] usageStats[path].count += 1;
[0147] usageStats[path].lastUsed = now;
[0148] / / Save statistics
[0149] (options.setState || setState)(`${key}_usage`, usageStats, storage);
[0150] }
[0151] Example 2:
[0152] On the basis of the implementation column 1, a system for local storage of Vuex state library data in embodiment 1 is implemented, such as Figure 2 Shown include:
[0153] Data parsing unit, obtains valid historical data in the browser;
[0154] Data initialization unit, which merges historical data with the data of the current Vuex state library and initializes it;
[0155] The data subscription unit monitors whether the merged data status has changed. If so, it proceeds to the next step. Otherwise, the current merged data does not need to be localized.
[0156] The data local storage unit filters and processes the merged data and writes it into the browser local storage.
[0157] In one embodiment, a computer-readable storage medium is provided. The computer-readable storage medium may be non-volatile or volatile, and stores a computer program thereon. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.
[0158] In one embodiment, a computer program device is provided, comprising a computer program, which implements the steps in the above method embodiments when executed by a processor.
[0159] Those skilled in the art will appreciate that all or part of the processes in the above-mentioned embodiments can be implemented by
[0160] The computer program instructs the relevant hardware to complete the operation, and the computer program can be stored in a non-volatile computer.
[0161] In a readable storage medium, the computer program, when executed, may include the processes of the embodiments of the above methods. Wherein, any reference to memory, database or other media used in the embodiments provided in this application may include at least one of non-volatile and volatile memory. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory may include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The databases involved in the various embodiments provided herein may include at least one of a relational database and a non-relational database. Non-relational databases may include, but are not limited to, distributed databases based on blockchains. The processors involved in the various embodiments provided herein may include, but are not limited to, general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic units, data processing logic units based on quantum computing, and the like.
[0162] The technical features of the above embodiments can be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.
[0163] The above description is merely an exemplary embodiment of the present invention and does not limit the patent scope of the present invention. Any equivalent structural transformation made by utilizing the contents of the present invention's description and drawings under the technical concept of the present invention, or directly / indirectly applied in other related technical fields, is included in the patent protection scope of the present invention.
Claims
1. A method for local storage of Vuex state library data, characterized in that: The method comprises: S1. Get valid historical data in the browser; S2. Initialize the merged historical data with the current Vuex state library data; S3. Monitor whether the merged data status has changed. If so, proceed to the next step. Otherwise, the current merged data does not need to be localized. S4. Apply exponential smoothing to the merged data, filtering out the data with the highest current access weight and writing it to the browser's local storage; The top five data access weights are selected as retained data. The access weight is calculated as follows: W n = α * current visit impact + (1-α) * W n-1； Current visit impact = (number of visits weight × 0.6 + freshness weight × 0.4) / 2; Freshness weight = 1 - (current access time - last access time) / maximum time window; α is the smoothing coefficient, ranging from 0 to 1, with a default value of 0.3; W n-1 is the historical weight.
2. A method for local storage of Vuex state library data as described in claim 1, characterized in that: The step S1 includes: First, deserialize the historical data into a string using JSON.parse(), and then verify the processed data using the try catch function. If qualified, further determine whether the historical data meets the version requirements of the current Vuex operating environment. If not, convert the historical data into valid data that meets the version requirements, otherwise, discard it.
3. A method for local storage of Vuex state library data as described in claim 1, characterized in that: The step S2 includes: By calling the replaceState() function, the merged data is passed in as a parameter for initialization.
4. A method for local storage of Vuex state library data as described in claim 1, characterized in that: In step S3, the method for monitoring whether the merged data status changes is: By calling the subscribe() function, the object of mutation.type is monitored to see if it is equal to the trigger type. If so, the data has changed.
5. A method for local storage of Vuex state library data as described in claim 1, characterized in that: The step S3 comprises: Temporarily save the merged initialization data snapshot, and save the current operation log when the merged data status changes.
6. A system for local storage of Vuex state library data, characterized in that: include: Data parsing unit, obtains valid historical data in the browser; Data initialization unit, which merges historical data with the data of the current Vuex state library and initializes it; The data subscription unit monitors whether the merged data status has changed. If so, it proceeds to the next step. Otherwise, the current merged data does not need to be localized. The data local storage unit uses the exponential smoothing method to filter the merged data and write the data with the highest current data access weight ranking into the browser local storage; The top five data access weights are selected as retained data. The access weight is calculated as follows: W n = α * current visit impact + (1-α) * W n-1； Current visit impact = (number of visits weight × 0.6 + freshness weight × 0.4) / 2; Freshness weight = 1 - (current access time - last access time) / maximum time window; α is the smoothing coefficient, ranging from 0 to 1, with a default value of 0.3; W n-1 is the historical weight.
7. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.
8. A computer device, characterized in that: The method comprises a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 6 when executing the computer program.