Svelte 使用 github.com/joshnuss/svelte-local-storage-store 订阅更改

Question

我对 Svelte 很陌生，有 IOS 背景。我目前正在尝试构建一个相当简单的应用程序，并试图在我的 firebase 数据库中更改我的值时自动更新它们。我当前的代码使用 3 个页面，并且可以获取初始值，但是，任何我试图使其响应的操作都会导致我的应用程序崩溃。你们中的任何一位有用的人都可以解释一下如何更改我的代码以使其正常工作吗？到目前为止我的代码：

getter.js

import { assignedUser } from "@stores/persistedStore";

 async function getUser(thisUser) {

    const docRef = doc(db, "userData", thisUser);
    const userSnapshot = await getDoc(docRef);
    const theUser = userSnapshot.data();

    assignedUser.set({
        theUser
    })

 
}

export { getUser };

persistedStore.js

import { persisted } from 'svelte-persisted-store'


// single user details
export const assignedUser = persisted('assignedUser', {})

+page.svelte

 <script>
import { get } from 'svelte/store' 
 import { assignedUser } from "@stores/persistedStore";

 const singleUser = get(assignedUser);
 </script>

 <div>{singleUser.theUser.userWeight}</div>

此代码完美地显示了我的用户体重，并按其应有的方式在页面上保持不变。我显然需要它具有反应性，但不必刷新页面。我知道这是通过 subscribe 方法完成的，但不确定如何正确实现？有人可以指出我正确的方向吗？

提前致谢

Answer 1

应该就这么简单。直接使用 $ 读取它应该在它发生变化时更新它，而不需要任何额外的交互。

<script>
    import { assignedUser } from "@stores/persistedStore";
</script>

<div>{$assignedUser.theUser.userWeight}</div>