Open wattsie opened 3 years ago
Hi All, As it has been very quiet on this git, I have spent some more time myself.
So I have been able to work out how to get around the IDBObjectStore
issue, using the reducer: (state) => JSON.parse(JSON.stringify(state))
However, if I want to specify modules, the docs say you shouldnt use a reducer.
Any idea if it is possible to apply a reducer per module?
Or a fix so that state is stripped of all non-cloneable entries before being passed to localforage?
Here is what I have working atm, however I would like to be able to have mod1
, mod2
and mod3
in separate stores.
Any suggestions?
import VuexPersist from 'vuex-persist'
import localForage from 'localforage'
const store1 = localForage.createInstance({})
store1.config({
driver : localForage.INDEXEDDB,
name : 'myDb',
version : 1.0,
storeName : 'myStore',
})
const vuexStorage1 = new VuexPersist({
key: 'vuex',
storage: store1,
strictMode: false,
asyncStorage: true,
reducer: (state) => JSON.parse(JSON.stringify(state)),
})
export default createStore({
modules: {
mod1,
mod2,
mod3,
},
strict: false,
plugins: [vuexStorage1.plugin],
})
For example, if I try this, I get a complete copy of all store modules in both databases. Obviously, the converting of the global state is over ruling any module limits etc.
const store2 = localForage.createInstance({})
store2.config({
driver : localForage.INDEXEDDB,
name : 'myDb2',
version : 1.0,
storeName : 'myStore2',
})
const vuexStorage2 = new VuexPersist({
key: 'vuex2',
modules: ['mod2'],
storage: myStore2,
strictMode: false,
asyncStorage: true,
reducer: (state) => JSON.parse(JSON.stringify(state)),
})
and modify
plugins: [vuexStorage1.plugin, vuexStorage2.plugin],
Many thanks in advance.
I am having the same issue. No idea what may be going on there… also not really much to add, the description is already pretty on point.
I think we can do something like this:
storage: {
getItem: async (key: string) => {
const raw: string | null = await localForage.getItem(key)
const data = raw ? JSON.parse(raw) : {}
return data
},
setItem: async (key: string, value: any) => {
const valueString = JSON.stringify(value)
localForage.setItem(key, valueString)
},
removeItem: async (key: string) => localForage.removeItem(key),
},
asyncStorage: true,
aka. wrap the localForage
getter and setter in sort of a serializer/deserializer.
This way we can still use the modules as well.
Hi All, New to "vuex-persist" mainly been using another persist package, and started having issues with exceeding storage size. Data is around 6mb, but looks like LocalStore is limited to less than ~5Mb.
So thought I would take a look into using "vuex-persist" and IndexedDB (via localForage).
As such, I have configured my store as follows:
When run the above, all works as expected, I can see the localStore "data" key created with content, and when refreshing the page, everything loads as expected.
However, if I change to "localForage", nothing shows up in the "IndexedDB" Browser and when page is refreshed all data is lost.
PS: I do find I am getting the following on both Firefox and Chrome:
Which is weird, as all the data is a bunch of large arrays, and localStore saves perfectly.
Any suggestions or pointers would be really appreciated.
Many thanks in advance.
Package Versions: