javascript - 如何更新这个 Svelte 商店而不每次都重新创建它?
问题描述
这里是 REPL:https ://svelte.dev/repl/56770fec88af4b76bdc8ea962178854e?version=3.42.1
这里的代码:
App.svelte:
<script>
import {editableStore} from "./store";
let name = "John"
$: player = editableStore(name);
</script>
<h1>Hello {$player.name}!</h1>
<button on:click={() => name = (name === "Bob" ? "Jerry" : "Bob")}>
Change name
</button>
<h2>Log:</h2>
{#each $player.log as log}
<li>{log}</li>
{/each}
商店.js:
import {writable} from "svelte/store";
const defaultStore = {
name: "Bob",
age: 18,
log: []
};
export const editableStore = (name) => {
console.log("Recreated with name:", name);
const {subscribe, update} = writable({...defaultStore}, () => () => clearInterval);
if (name) {
update(s => ({...s, name}));
}
const clearInterval = setInterval(() => {
update(s => ({...s, log: [...s.log, new Date()]}))
}, 1000)
return { subscribe };
};
如您所见,如果您单击“更改名称”,商店将重新创建。
这是我需要避免的。
但是怎么做?
解决方案
与其每次name
更改都重新创建商店,不如只创建一次并$player.name
在name
更改时设置。
<script>
import {editableStore} from "./store";
let name = "John";
let player = editableStore(name);
$: $player.name = name;
</script>
这将要求您更新您的 store 方法以返回该set
函数。
export const editableStore = (name) => {
console.log("Recreated with name:", name);
// also destructure set here
const {subscribe, update, set} = writable({...defaultStore}, () => () => clearInterval);
if (name) {
update(s => ({...s, name}));
}
const clearInterval = setInterval(() => {
update(s => ({...s, log: [...s.log, new Date()]}))
}, 1000)
// also return set here
return { subscribe, set };
};
推荐阅读
- android - 停止 LiveData 的下游
- ssh - 告诉 SSH 为特殊用户使用特殊的 IdentityFile
- javascript - 分配nodejs中的左侧无效
- c++ - 程序在c ++中的for循环后结束
- java - 如何将两个字段结果集放入java中的数组列表中
- python - 如何在 HTML 网站中搜索关键字并将该链接粘贴到搜索栏中?
- c - 在c中求解具有2个未知参数的方程的最快算法?
- python - 如何根据键从字典中检索值?
- git - git -add 然后 git -rm -r 在提交之前删除整个项目
- c# - SQL Server:如何管理外键?当我们需要合并来自不同位置的数据时?