如何在 Svelte 中创建更新到本地存储的嵌套数组存储？

如何解决如何在 Svelte 中创建更新到本地存储的嵌套数组存储？

我想创建一个对象作为存储，其中对象中的数组也可以用作存储。每个数组都需要更新（订阅），对象也需要更新到本地存储。

这是对象的结构

{
   "expenses":[
      {
         "name":"sam","id":1
      },{
         "name":"bob","id":2
      }
   ],"options":[
      ...
   ]
}

这是我目前的代码：

import { writable } from "svelte/store";

// get local storage
let storage = localStorage.getItem("userInputs");

// if storage exists,use it. otherwise set empty array
export let userInputs = writable(JSON.parse(storage) || []);
export let userExpenses = writable(storage.expenses || []);
export let userOptions = writable(storage.options || []);

// subscribe inputs to localStorage
userInputs.subscribe((val) =>
    localStorage.setItem("userInputs",JSON.stringify(val))
);

我希望能够在我的应用中使用 userExpenses 和 userOptions 作为存储。当这些数组更新时，它们需要在主 userInputs 对象中更新，该对象需要推送到 localStorage。

谢谢

解决方法

您可以为此使用 svelte 很棒的 derived 函数，例如

// create userInputs as derived which results in a store
// that is updated whenever userExpenses or userOptions
// are.
const userInputs = derived(
   [userExpenses,userOptions],([ue,uo]) => ({
      userExpenses: ue,userOptions: uo
   })
);

// sync to localStorage
userInputs.subscribe(val => {
    localStorage.setItem("userInputs",JSON.stringify(val));
});