If you’re familiar with localStorage you know how indispensable it can be when you’re building single page applications (SAPs). It allows you to store data persistently in a browser e.g. user details or a shopping cart.
LocalStorage
LocalStorage allows you to store a large amount of data in your browser storage without any expiration date. That means if you reload your page the data will still be there.
I used to store Vuex state in localStorage in my Vue.js apps and it worked just fine. There were some cons though, the biggest one was that only some parts of the Vuex state were stored in a localStorage, unless I saved everything manually.
Vuex-persist
Vuex-persist is an NPM-package that is used to store Vuex state in a persisted storage. It’s very similar to localStorage or even Cookies (see the difference between the localStorage, Cookies and sessionStorage).
It automatically saves store on mutation and makes it persistent.
You can select where would you like Vuex-persist to store your data. You can create multiple Vuex-persist instances and store some information in cookies, some in localStorage and sessionStorage.
If you’ve been storing your Vuex state manually and partially, give Vuex-persist a try.
You can download it here.
If you find this post useful, please let me know in the comments below.
Cheers,
Renat Galyamov
Want to share this with your friends?
👉renatello.com/vue-js-array-length-watcher
PS: Make sure you check other Vue.js tutorials, e.g. Top 5 CSS frameworks for your Vue.js project (2019) or how to go back to the previous page in Vue.js.
Buy me a coffee