有一个物体,其数据与另一个物体相匹配,但它们有不同的结构。
例如,考虑这一设想:
The Team object holds the team ID as its key. The Team object contains name and users objects as its values. The users object has the user ID as its key, which doesn t overlap with user IDs from other teams.
因此,我要提出一个有所有用户的新目标。
The users object can be subscribed to by users, and modifying this should reflect changes in the Team object. Conversely, the Team object can be subscribed to by users, and modifying it should reflect changes in the users object.
How can I achieve this?
我试图在Java文本档案中利用用户功能更新每个物体,但我最后陷入了无限的 lo,失败了。
这里的例子有:
<script>
import {writable} from "svelte/store";
const teamDict = writable({})
const userDict = writable({})
function initTeamDict() {
teamDict.set({
1: {
name: "good team",
users: {
1: "James",
2: "Poppy",
48: "Hway"
}
},
2: {
name: "bad team",
users: {
47: "Kelin",
35: "Teo",
24: "Ferma"
}
}
})
}
function initUserDict() {
userDict.set(Object.values($teamDict).reduce((acc, team) => ({...acc, ...team[`users`]}), {}))
}
</script>
<button on:click={initTeamDict}>init team dict</button>
<button on:click={initUserDict}>init user dict</button>
<div> {JSON.stringify($teamDict)}</div>
<div> {JSON.stringify($userDict)}</div>
<button on:click={() => $teamDict[`1`][`users`][`1`] = "top"}>this button should change userDict also </button>
<button on:click={() => $userDict[`1`] = "bottom"}>this button should change teamDict also </button>
REPL
https://svelte.dev/repl/e6570ac9ca464c15967a43c8311dcd4d?vert=4.2.8”rel=“nofollow noreferer”>https://svelte.dev/repl/e6570ac9ca464c15967a43c8311dcd4d?version=4.2.8
Edit
在@ghostmodd的答复的帮助下,我通过撰写以下法典解决了这一问题。
我复制了该物体,并修改了该物体,因为修改复制件不会引发订阅。
修改后的物体不得在订货单上提出,因此,我使用衍生物形成了一种单独的看法。
<script>
import {derived, writable} from "svelte/store";
import {Button} from "flowbite-svelte";
const teamDict = writable({})
const userDict = writable({})
teamDict.subscribe(($$teamDict) => {
const userDictCopy = $userDict
for (const key in userDictCopy) {
delete userDictCopy[key]
}
Object.assign(userDictCopy, Object.values($$teamDict).reduce((acc, team) => ({...acc, ...team[`users`]}), {}))
})
userDict.subscribe(($$userDict) => {
const teamDictCopy = $teamDict
for (const team of Object.values(teamDictCopy)) {
team[`users`] = {}
}
for (const [userId, user] of Object.entries($$userDict)) {
teamDictCopy[user[`team_id`]][`users`][userId] = user
}
})
const storeView = derived(
[teamDict, userDict],
([$teamDict, $userDict], set) => {
set({teamDict: $teamDict, userDict: $userDict})
}
)
function initTeamDict() {
teamDict.set({
1: {
name: "good team",
users: {
1: {
"name": "James",
"team_id": 1
},
2: {
"name": "Poppy",
"team_id": 1
},
48: {
"name": "Hway",
"team_id": 1
}
}
},
2: {
name: "bad team",
users: {
47: {
"name": "Kelin",
"team_id": 2
},
35: {
"name": "Teo",
"team_id": 2
},
24: {
"name": "Ferma",
"team_id": 2
}
}
}
})
}
</script>
<Button on:click={initTeamDict}>init team dict</Button>
<div> {JSON.stringify($storeView.teamDict)}</div>
<div> {JSON.stringify($storeView.userDict)}</div>
<Button on:click={() => $teamDict[`1`][`users`][`1`][`name`] = "top"}>this button should change userDict also </Button>
<Button on:click={() => $userDict[`1`][`name`] = "bottom"}>this button should change teamDict also </Button>
REPL https://svelte.dev/repl/0b89313234b8d94a6adf38ba?version=4.2.8