Vue Reset Data

Posted on  by admin

Posted by jarriola on Fri, 04 Mar 2022 13:03:15 +0100. In vue, data, vuex store and other data are in memory.

Once the page is refreshed, these data will be lost (or reset to the initial value), which will affect the user experience at some times.

If you want to make the data refresh not lost, you have to listen to the page refresh event, cache the data to the local storage before the refresh, and then recover the data from the local storage after the page refresh.

At present, the more common practice is similar to this:.

This is to directly save an entire store locally, but most of the time we need to save only some key data locally. This is inflexible and extremely unfriendly to data that we don't want to put in vuex. Based on the above idea of caching data to local storage and then recovering when the page is loaded, I have made some improvements to the above method:.

Page refresh data lost

Save the above code to a file named datasessioncache JS file, Then in app The created hook in Vue initializes the init function.

It needs to provide a itemName:. For data in vue components, such as data, write the data to be cached into an object, and then register in the created hook, for example:. A similar method can be used for the data in vuex store:.

The prototype of register is register (ID, obj,..

The third parameter is used to specify the attributes to be cached. If propertyKeys is empty, all its attributes will be cached.

For example, when we want to cache part of the data of a single text component without changing the original code, we can write as follows:.

Cache, recovery

Save / restore data before and after page refresh, with less performance overhead. Only a small amount of modification is required for the original code, or there is no need to modify the original code at all. Easy to use, flexible and convenient, initialization and registration are OK, and the data to be cached can be flexibly specified.

A mixin to reset your data to some point of time for VueJS components.

Install the mixin globally. Or import it as an individual mixin on your component. Call thefunction initResetPlugin to init the mixin at any point of the lifecycle of your component (Preferably on created or mounted):. When you want to reset some, call the function resetData:. keys: Arrays of strings containing the names of the data key you want to reset or a simple string with the name of the key to reset.

If this value is null, will reset the whole data. This mixin include a method named $clone to clone in deep objects. NOTE: Do not use the key $originalData as part of your data. Modified5 months ago.


  1. I have a component with a specific set of starting data:. This is data for a modal window, so when it shows I want it to start with this data.
But this seems really sloppy. It means that if I ever make a change to the component's data properties I'll need to make sure I remember to update the reset method's structure. That's not absolutely horrible since it's a small modular component, but it makes the optimization portion of my brain scream.
The solution that I thought would work would be to grab the initial data properties in a ready method and then use that saved data to reset the components:. But the initialDataConfiguration object is changing along with the data (which makes sense because in the read method our initialDataConfiguration is getting the scope of the data function. Is there a way of grabbing the initial configuration data without inheriting the scope? Am I overthinking this and there's a better/easier way of doing this? Is hardcoding the initial data the only option? 2525 gold badges7878 silver badges127127 bronze badges. 127127 bronze badges. extract the initial data into a function outside of the component. use that function to set the initial data in the component. re-use that function to reset the state when needed. 4444 bronze badges. 22.2k77 gold badges6060 silver badges4848 bronze badges. 6060 silver badges4848 bronze badges. To reset component data in a current component instance you can try this:. Privately I have abstract modal component which utilizes slots to fill various parts of the dialog. When customized modal wraps that abstract modal the data referred in slots belongs to parentcomponent scope. Here is option of the abstract modal which resets data every time the customized modal is shown (ES2015 code):. You can fine tune your modal implementation of course - above may be also executed in some cancel hook. Bear in mind that mutation of $parent options from child is not recommended, however I think it may be justified if parent component is just customizing the abstract modal and nothing more. 11 gold badge7373 silver badges5858 bronze badges. 5858 bronze badges. Caution, Object.assign(this.$data, this.$ does not bind the context into data(). cc this answer was originally here. 33 gold badges7777 silver badges8181 bronze badges. 8181 bronze badges. If you are annoyed by the warnings, this is a different method:. No need to mess with $data. I had to reset the data to original state inside of a child component, this is what worked for me:. Parent component, calling child component's method:. Child component:. defining data in an outside function,. referencing data object by the defined function. defining the clearallData() method that is to be called upon by theparent component. 11 gold badge1717 silver badges1616 bronze badges. 1616 bronze badges. There are three ways to reset component state:. Define key attribute and change that. Define v-if attribute and switch it to false to unmount the component from DOM and then after nextTick switch it back to true. Reference internal method of component that will do the reset. Personally, I think the first option is the clearest one because you control the component only via Props in a declarative way. You can use destroyed hook to detect when the component got unmount and clear anything you need to. The only advance of third approach is, you can do a partial state reset, where your method only resets some parts of the state but preserves others. Here is an example with all the options and how to use them:,js,output. 88 gold badges6060 silver badges6767 bronze badges.