Vuex-persistedstate: 'Unexpected token o in JSON at position 1 'when using localForage as storage

[mazeeblanke]

my code:

plugins: [createPersistedState({key : 'v', storage: localForage})]

[robinvdvleuten]

Ok so I do not know exactly what localForage is here? Looks like a typo to me. You'll have to provide more context than this I'm afraid.

[robinvdvleuten]

Please open a more descriptive issue with more context and example code.

[deltragon]

localForage is a wrapper around different kinds of offline storage, IndexedDB, WebSQL, localStorage, etc.: https://localforage.github.io/localForage/
It implements a interface very similar to localStorage, just asynchronous; setItem, getItem, etc. return Promises.
Also, it can store all kinds of data types, not just strings, which might be what's causing problems here (JSON decoded twice?)
What I'd be interested personally is if persistedstate has support for asynchronous storage types in general

[deltragon]

I'd be open to making a contribution

[robinvdvleuten]

@deltragon that would be great! It looks like they have the same API as localstorage. My first guess is that you need to overrule the storage option here (https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/src/plugin.js#L64). And then inject a similar object as this class (https://github.com/robinvdvleuten/vuex-persistedstate/blob/master/src/plugin.js#L31) with the the getItem / setItem methods calling the underlaying localforage library.

[robinvdvleuten]

@deltragon maybe an instance created by localforage as described here will do (https://localforage.github.io/localForage/#multiple-instances-createinstance).

import createPersistedState from 'vuex-persistedstate'

const localForageInstance = localforage.createInstance({ name: "nameHere" });

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({ storage: localForageInstance })]
})

[robinvdvleuten]

@deltragon my given example should work with a default localForage setup. For more advanced use cases this plugin isn't then insufficient. I can't merge all functionality for all user's use cases I am afraid. I would like this plugin to be as lean as possible.

[deltragon]

while i do understand the implications from asynchronous operation in the dehydration, and with that the decision not to include the functionality, i do have to point out that localForage does not work with your given example since localForageInstance.getItem returns a Promise, not a value.

[robinvdvleuten]

then I am afraid that the concept of vuex and so this plugin isn't compatible with your particular use case. What you can do though is to look into how to set your "initial state" through SSR (https://ssr.vuejs.org/en/data.html), which should be the same idea.