想要使用VueSessionStorage在会话中存储完整的购物车

Question

我能够使用VueSessionStorage在会话中存储简单的字符串 https://www.npmjs.com/package/vue-sessionstorage

但是，在购物车中，有多个产品，每个产品确实都有一组数据。 我想将整个数组存储在会话密钥中。

购物车数组结构类似于

cart = {
"pid_1" :  {
    "details": {},
    "price" {},
 },
"pid_2" :  {
    "details": {},
    "price" {},
 },
}

然后从会话中，我想访问每个产品的详细信息，例如 购物车[“ pid_1”]。

我尝试了

let sessionKey = 'product_option';
let key = 'pid_10;
let sessionOptions = [];
let product_options = null; // this will have the pid= 10's cart data
sessionOptions.push(
            {
                [key]: product_options
            });
this.$session.set(sessionKey, JSON.stringify(sessionOptions));

然后访问它

let jsonData = this.$session.get(sessionKey);
productOptions= JSON.parse(jsonData);

if (productOptions) {
                for (let k = 0; k < productOptions.length; k++) {
                    if (productOptions[k][key]) {
                        productData = productOptions[k][key];
                    }
                }
            }

然后productData将具有ID = 10的产品的会话数据

但是它看起来很凌乱，代码也不干净。如果我们在购物车中有多个产品，它将更加复杂。在会话中保存购物车数据并访问它的最佳方法是什么？