仅当 api 在商店中不存在值时,才使用 svelte 从 api 获取值

Get a value from api only if it doesn't exist in the store with svelte

提问人:Dujard 提问时间:11/10/2023 最后编辑:Dujard 更新时间:11/13/2023 访问量:42

问:

我正在尝试在 svelte 和 urql 中创建一个函数,以便仅在已经在商店中设置时才让用户登录。否则,我从api中获取它。

在我的登录提交表单中,我在商店中设置了用户值:

 function onSubmit() {
    if ($data?.user) {
      userLogged.update((s) => ({
        ...s,
        user: $data?.user,
      }));
    }
  });

在这里的另一个组件中,我尝试从 store 中获取值(如果存在)或从 api 中获取值:

<script lang="ts">
let user: any;
    const getUser = () => {
        let user = get(userLogged);
    
        if (user.user !== null) {
          return user;
        } else {
          const userQuery = queryStore({
            client: getContextClient(),
            query: USER_QUERY,
          });
          userQuery.subscribe((val) => {
            console.log("val ?", val?.data?.user);
            userLogged.update((s) => ({ ...s, user: val?.data?.user }));
    
            user = val?.data?.user;
           
          });
          return user;
        }
      };
    user = getUser();
    console.log("user", user);
</script>

但是当我在第一次呈现时刷新页面时,控制台 .log 返回 undefined,然后在更新组件时正确返回用户。我不明白为什么,因为订阅中的控制台 .log 每次都返回良好的值,并将其分配给用户变量

JavaScript 异步 渲染 Svelte urql

评论

0赞 Natumanya Guy 11/11/2023
从哪里跑?...?如果您使用的是 Sveltekit(不是 Svelte),请考虑使用 Cookie 来存储用户状态。您可以在此处阅读更多内容: blog.logrocket.com/authentication-svelte-using-cookiesgetUseronMount()
0赞 Dujard 11/13/2023
getUser() 在我的 List.svelte 组件顶部的 script 标签之间运行。我声明了一个全局变量用户来分配它并将其用于我的模板。理想情况下,我想导出该函数,然后在其他组件中重用它。我编辑了代码。我不使用 SvelteKit,只是 Svelte 框架

答:

1赞 Dujard 11/13/2023 #1

终于成功了。我只是在父组件中设置了我的存储值,并将其导入到不同的子组件中,然后在第一次渲染中正确地返回该值。