无法重置存储值

Question

我想将现有存储的值重置为默认值。出于用户体验的原因，我不想创建一个新的商店。

const defaults = {
name: {
value: "",
},
foo: [],
some: {
other: {
data: ""
}
}
};
const store = writable(defaults);
export const myStore = {
subscribe: store.subscribe,
reset: () => {
store.set(defaults);
}
};

store的行为与预期一致，reset()方法除外。当它被调用时，它不会更新存储，没有一个响应式绑定反映默认值。

...
$myStore.name.value = "foo";
// foo
myStore.reset();
$myStore.name.value;
// foo

Answer 1

这不是Svelte的问题，而是javascript如何处理对象的问题。当您将一个对象分配给另一个变量时，它只会分配一个引用，而不会克隆该对象。这意味着，当您调用$myStore.name.value = "foo";时，实际上是在更新存储在defaults中的相同对象。

可以通过运行

下面的代码来观察这一点

let a = {name: ''};
let b = a;
b.name = 'test';
console.log(a); // {name: 'test'}

因为你在对象里面使用对象，仅仅解构默认也不会工作，因为你只会得到一个对象的浅拷贝，这意味着你可以更新$myStore.name，但不能正确地更新$myStore.name.value。

要正确复制默认值，您可以使用structuredClone，它可以在Chrome 98, Firefox 94和Node 17中使用。重写你的代码，它会像这样:

const store = writable(structuredClone(defaults));
export const myStore = {
subscribe: store.subscribe,
reset: () => {
store.set(structuredClone(defaults));
}
};

Answer 2

另一种方式-

const defaults = {
name: {
value: "",
},
foo: [],
some: {
other: {
data: ""
}
}
};
const store = writable(defaults);
export const myStore = {
subscribe: store.subscribe,
reset: () => {
store.set(JSON.parse(JSON.stringify(defaults)));
}
};