Prevent persisted state locking up app in VueX

Question

I'm using the vuex-persistedstate module to keep track of my state and persist it to localStorage. The problem is that due to the amount of state that needs to be saved, the app gets locked up every time an update to my data occurs.

In order to solve that, I'm trying to use a promise to allow business calculations to be performed whilst the string is being generated. Once the string is ready, it should then be set to localStorage.

This is what I have:

const buildLocalStorageString = async (state) => {
  return await JSON.stringify(state);
}

export default new Vuex.Store({
  state: { etc, etc, etc },

  plugins: [createPersistedState({
    key: 'myApp',
    setState (key, state, storage) {
      buildLocalStorageString(state).then(string => {
        storage.setItem(key, string) 
      }) 
    }
  })],
})

Problem is, it doesn't solve the problem. There is still a noticeable delay when the app updates.

Jacob Goh · Accepted Answer · 2018-08-10T16:15:34.743

All localStorage calls are synchronous. And Javascript is single threaded. Saving 1 large chunk of data into local storage is always going to block all other execution.

I would solve this by splitting the data and saving it into local storage separately. Basically, just use multiple createPersistedState.

An extremely simple example implementation could look like this

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

const moduleA = {
    state: {
        a: 'a'
    },
    mutations: {
        updateA(state) {
            state.a += 'a';
        }
    }
}

const moduleB = {
    state: {
        b: 'b'
    }
}

export default new Vuex.Store({
    modules: {
        moduleA: moduleA,
        moduleB: moduleB
    },
    plugins: [createPersistedState({
        key: 'vuex_a',
        paths: ['moduleA']
    }), createPersistedState({
        key: 'vuex_b',
        paths: ['moduleB']
    })]
})

This makes sense. Can't believe I didn't think of just splitting up the states. Thanks! — Modermo, Aug 11 '18 at 07:46
I think the best solution would be not using persisted state for this data. I would only use it for account details. — atilkan, Mar 26 '19 at 08:00

Prevent persisted state locking up app in VueX

1 Answers1