【Vue 3】連想配列を IndexedDBに格納する方法 #vue.js3

結論

toRaw関数に連想配列を引き渡す。
「1」の戻り値をIndexedDBに格納する。

前提

Node.jsが利用できない環境のため、
以下のコードの通り、CDNより、Vue 3を読み込んで利用している。

<html lang="ja">
    <head>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
<!--- 以下省略 --->

※ 検証した時のバージョンは、「3.3.13」である。

詳細

Vue 3では、連想配列がリアクティブオブジェクトとして扱われているため、
一度、ピュアオブジェクトに変換してから、IndexedDBに格納する必要がある。

以下にサンプルコードを提示する。

vue.createApp({
    data : {
        productInformation = { item : 'しらす' , from : '静岡' }
    },
    method : {
        Insert : () => {
            const productInformationOfRaw = vue.toRaw(this.productInformation)
            // productInformationOfRawをIndexedDBに格納する処理（省略）
    },
    // 以下省略
}).mount('#app')

参考文献

余談

Vue 2（バージョン 2.7）では、連想配列をそのまま、IndexedDBに格納できた。