Vuex-persistedstate: reducer removes object from state entirely NOT just persisted-state NOT SOLVED

[joefresco]

const persistedStateOptions = {
  reducer: function (state, paths) {
   // No need to use let as the reducer itself can be immutable which do not mean that the properties are not mutable (https://ponyfoo.com/articles/var-let-const)
    let reducer = Object.assign({}, state)
    // state which you don't want to persist.
    delete reducer.module.objectname

    return reducer
  }
}
const options = {
...
  plugins: [createPersistedState(persistedStateOptions)]
}
export default new Vuex.Store(options)

Then when I view the state via the Vue Chrome plugin, the objectname no longer appears in the state.
If I comment out the delete line above, the object appears.
I tried both _let reducer_ and _const reducer_ just in case that made a difference.

The problem is that the object above exceeds the quota for the internal storage. I need to remove that object from being persisted BUT keep it in the Vuex state.

The following code complains of an undefined property error
const cognitoUser = cloneDeep(state.cognitoUser);
Help!!

[robinvdvleuten]

@joefresco if you try to delete the "root state" of your module, I can image that won't work as Vuex binds to these (read more about it here and here). If your object exceeds quota I would reconsider your application's architecture or move the object out of Vuex and handle it yourself. Hope that helps!

[joefresco]

@robinvdvleuten I'm very confused. How do you use the reducer function if not to delete a specific state element from being persisted?

Basically, I am storing an object that isn't very big (maybe 20 KB) but still hits quota errors for an unknown reason in Chrome. That object is only needed one time ever for a user (a validation object) and does not need to be persisted to local storage anyway.

I just can't figure out how to get it to not be persisted.

[joefresco]

@robinvdvleuten Your response to my reply would be greatly appreciated. Thanks

[r4fx]

Just return in reducer these states which need to be persist,
for example:

const store = new Vuex.Store({
    state: {
        userProfile: [],
        userIsAdmin: [],
        errorMessage: null
    },
    mutations: {

    },
    actions: {

    },
    plugins: [createPersistedState({
        reducer: state => ({
            userProfile: state.userProfile,
            userIsAdmin: state.userIsAdmin
            // errorMessage // this state is not included, no need to set to localStorage
        }),
    })]
});

[duyetpt]

So it think name reducer is confused. Because reducer in React as a function to mutate state.

[my3188]

@robinvdvleuten Your response to my reply would be greatly appreciated. Thanks

How did you solve this problem finally ?