How to persist vuex
This article focuses on "how to persist vuex". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to persist vuex.
Vuex can manage the state globally, but the data will disappear after refresh, which we don't want to see. How to solve this problem? we can persist the data state with local storage or through the plug-in vuex-persistedstate.
How to persist the state of vuex
1. Manually utilize the local storage of HTML5
Method
1. The state of vuex is selected in localStorage or sessionStorage.
2. In mutations, the defined method not only operates on the state of vuex, but also does corresponding operations on storage.
So the state exists with the storage and synchronizes with the vuex
two。 Using the vuex-persistedstate plug-in
In fact, the principle of the plug-in is also combined with the storage mode, but the unified configuration does not need to manually write the storage method every time.
Method of use
Installation
Npminstallvuex-persistedstate--save
Introduction and configuration: in index.js under store
ImportcreatePersistedStatefrom "vuex-persistedstate"
Conststore=newVuex.Store ({
/ /...
Plugins: [createPersistedState ()]
})
Stored to localStorage by default
To store it to sessionStorage, configure it as follows
ImportcreatePersistedStatefrom "vuex-persistedstate"
Conststore=newVuex.Store ({
/ /...
Plugins: [createPersistedState ({
Storage:window.sessionStorage
})]
})
All state are persisted by default
The usage of vuex
Installation:
Npminstallvuex-persistedstate--save
Vuex initialization begins to introduce:
Every time we update the status of vuex, the vuex in localstorage changes accordingly.
Vuex-persistedstate uses localStorage by default to solidify data.
At this point, I believe you have a deeper understanding of "how to do the persistence of vuex". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
