使用Pinia存储在IndexedDB中

nukf8bse  于 2022-12-16  发布在  IndexedDB
关注(0)|答案(1)|浏览(770)

是否可以使用Pinia在IndexedDB中本地存储数据?
我尝试使用Pinia持久化状态,它默认将数据本地存储在LocalStorage中。我只是想尝试它是否能与IndexedDB一起工作,因为它有更大的容量。

xggvc2p6

xggvc2p61#

你可以实现你自己的pinia插件来使用你想要的任何存储空间。这里是一个使用localForage的例子。

import { createApp } from 'vue'
import { createPinia, type Store } from 'pinia'
import App from './App.vue'
import localForage from "localforage";

const app = createApp(App)

// Optional
localForage.config({
    driver: localForage.INDEXEDDB, // This force IndexedDB as the driver
})

async function indexDbPlugin({ store }: { store: Store }) {
    const stored = await localForage.getItem(store.$id + '-state')
    if (stored) {
        store.$patch(stored)
    }
    store.$subscribe(() => {
        localForage
            .setItem(store.$id + '-state', { ...store.$state }) // Destructure to transform to plain object
    })
}

const pinia = createPinia()
pinia.use(indexDbPlugin)

app.use(pinia)
app.mount('#app')

https://pinia.vuejs.org/core-concepts/plugins.html#introduction
但是对于pinia-plugin-persistedstate插件,你不能使用indexDb,因为它是异步的,而且这个插件只支持同步存储:
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/limitations.html#storage-must-be-synchronous

相关问题