使用 Pinia 存储在 IndexedDB 中

Question

是否可以使用 Pinia 将数据本地存储在 IndexedDB 中？

我尝试使用 Pinia 持久状态，它默认将数据存储在 LocalStorage 中。我只是想尝试一下它是否可以与 IndexedDB 一起使用，因为它具有更大的容量。

Answer 1

您可以实现自己的 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

Answer 2

该插件允许使用indexedDB保存存储，但不再维护：

https://github.com/iendeavor/pinia-plugin-persistedstate-2