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 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 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
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.
Want to share this with your friends?
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.