如何在Svelte中创建更新到本地存储的嵌套阵列存储

Question

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

以下是对象的结构

{
"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和userOptionsserInputs对象中更新，该对象需要推送到localStorage。

谢谢

Answer 1

您可以使用svelte的强大派生函数，例如

// 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));
});