Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore'

[Yonier]

I'm trying to save an Array as state from an api response, i get:

https://i.imgur.com/J5sz2n8.png

Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': [object Object] could not be cloned. at eval (webpack-internal:///./node_modules/localforage/dist/localforage.js:1044:37) at createTransaction (webpack-internal:///./node_modules/localforage/dist/localforage.js:797:9) at eval (webpack-internal:///./node_modules/localforage/dist/localforage.js:1028:13)

It only happens when trying to save an array, but with strings i dont have any problem

I'm using Ionic Storage v3 wich returns promises, my instance:

const ionicStorage = new VuexPersistence({
    restoreState: async (k) => {
        console.log('restore trigg', k)
        let val = null
        await storage.get(k).then(v => {
            val = v
        })
        console.log('return val:', val)

        return val
    },
    saveState: (k, s, st) => {
        console.log('saveState triggered', s)
        storage.set(k, s)
    },
    asyncStorage: true,
    modules: ['auth', 'user']
})

Ionic storage:

import { Storage, Drivers } from '@ionic/storage'

const localStorage = new Storage()
localStorage.create()

const storage = {
    set: async(i: any, v: any) => {
        await localStorage.set(i, v)
    },
    get: async(i: any) => {
        return await localStorage.get(i)
    },
    remove: async (i: any) => {
        await localStorage.remove(i);
    },
    clear: async () => {
        await localStorage.clear();
    }
}

export default storage

My dependencies:

    "@ionic-native/secure-storage": "^5.31.1",
    "@ionic/storage": "^3.0.4",
    "@ionic/vue": "^5.6.0-dev.202102221703.5300dcc",
    "@ionic/vue-router": "^5.6.0-dev.202102221703.5300dcc",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-rc.2",
    "vuex-persist": "^3.1.3",

Any help pls?, Thanks!.

[Juice10]

I'm having the same issues trying to upgrade from vue 2 to vue 3 while using LocalForage + Vuex-ORM. My guess is it has something to do with the new use of Proxy objects in Vue 3.

Edit: Guess was correct, if I had checked out your screenshot I wouldn't have had to guess

[Juice10]

I was able to get around this by using the clone method from pouchDB to clean up my state from any proxy objects.

import {clone} from 'pouchdb-utils';

const vuexLocal = new VuexPersistence({
  key: "editor",
  storage: localForage,
  asyncStorage: true,
  reducer: (state) => clone(state),
});