How to make Vue.js Vuex state persistent on page refresh

You created your first Vue.js project successfully. Awesome...
But, whenever you refresh the page, it starts to reset all your data...
What is the solution?
How we can make Vue.js store persistent?

Fortunately, there is a simple way to do it:

1. Install vuex-persistedstate package.
# npm install --save vuex-persistedstate

2. Import on store.js
import createPersistedState from "vuex-persistedstate";

3. Add this lines to Vuex.Store({});
plugins: [createPersistedState({
storage: window.sessionStorage,
})]
4. Optionally, if you have Logout, you can add this line to clear Session:
sessionStorage.clear();

That is it. You can refresh your page whenever you want without any fear:)