How to save Vuex State data into localStorage? Issue

by

Problem statement could be:

  • How to preserve Vuex state data in VueJS on page refresh.
  • How to save my vuex state data in localStorage.
  • How to not lose my state data in Vuex whenever I reload my page – VueJS.

Save Vuex state data into your localStorage:

I will not waste your too much time by writing blah blah blah… So, let’s come to the point. There are options and methods by which you can write your own function to store your data in localStorage. But the best thing here is that we have an npm package that you can use in the project. And this will help you to store your state data in localStorage. And the name of this package is `vuex-persistedstate`.

So, all you need to do is just add this plugin to your Vuex Store. and it’s ready. As you’re reading this blog, I expect that you know how to create a store and set up Vuex. So, we will not go to that topic.

So, let’s see how to install and add this plugin to VueJS project. First, you will have to install the package via the given command:

npm i vuex-persistedstate

Now after that import this package and create an instance of it. And then just add this instance inside your plugin section of Vuex store. As you can see how I defined it below.

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
import fixed from './modules/fixed';

const dataState = createPersistedState();

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0, 
    ...

  },
  getters,
  actions,
  mutations,
  modules: {
    fixed,
  },
  plugins: [dataState],
});

After that, it will preserve all of your state data inside localStorage. But In case if you want to store just specific data from state then you can define paths object while creating instance like:

const dataState = createPersistedState({
     paths: ['state_variable_name']
});

That’s all, you can also define persisted state on module level if you want. So, I hope this will solve your problem.

Thanks for reading 🙂

Leave a Comment