Is there a way to use restoreState to cast the data into classes?

[ChadRoberts21]

My data is stored and retrieved perfectly fine, really good job, thank you!

However, I use the js's class system to help me organise my data into models that have a number of getters that are useful for building more complex computed properties and methods in my vue app. I would love to keep this encapsulation in the classes as it lets me share them across different codebases using different libraries.

Is there a way I can use the restoreState method to cast the data into new objects of my custom js classes before they get restored to the store?

[morficus]

Can you elaborate on this some more please, I'm not clear on what you are trying to do.

It sounds like you want access to the data before it gets placed in to the Vuex store?

[ChadRoberts21]

in an ideal world, before the data gets placed into the store (after being retrieved from storage) I would like to be able to:

• Intercept the data.
• use a function to modify the data. i.e. use the data to create a custom object.
• then I would like to pass the output of the function to the store.

In my use case, all of my data is organised into custom objects. These custom objects are used extensively though out my app. I would really like a way that I can pass a function to the retrieval process so that I can convert the raw data into these custom objects as it makes data organisation of complex object a lot simpler and easier to maintain. There is not many examples of the restoreState hook and I though it might be able to accomplish this task.

In my head I imagine I would solve the problem with something like a function pipeline that the data can pass though. However I have not had time to explore your code base in depth so this may not make sense.

If none of this is possible I understand. If you need a further explanation let me know an I will try and make a code example as soon as I have time.

[pedromcunha]

Any update on this? I'm also trying to achieve the same functionality. This is especially an issue when introducing breaking changes to the state.

[ChadRoberts21]

I could not get it to work unfortunately, in the time limit I had. When I get time at work I will revisit this to see if i can come up with a solution.

[claytonrcarter]

I've been doing it this way for a while:

const vuexPersist = new VuexPersistence({
    // ...
    restoreState: (key, storage) =>
        storage.getItem(key).then(value => {
            var state =
                typeof value === 'string'
                    ? JSON.parse(value || '{}')
                    : value || {}

            state.widgets =
                state.widgets.map(w => new Widget(w))

            return state
        }),
})

This is simplified from what I'm actually doing (I'm doing more error checking in case widgets isn't defined, etc) but should be enough to get you started. Also, I recall that the var state = typeof ... was just taken directly from the relevant part of vuex-persist.

[intellent]

I’ve got the same problem. I use a custom restoreState() to cast the data from localStorage to my desired object type with Object.assign(). However, once the object arrives in the Vuex store, the class assignment is gone and back to a neutral object.