Svelte组件间导出存储变量返回undefined问题求助

问题原因 #

你遇到的问题核心是异步数据加载和组件初始化的顺序冲突：

• obj 是通过load函数异步获取的，组件刚初始化时obj还没被赋值，此时用writable(obj.token.token.metadata)创建的store，初始值就是undefined。
• 后续obj被异步赋值后，已经创建好的objData不会自动同步新数据，所以在Attributes.svelte里读取到的始终是初始的undefined。

解决方案 #

方案一：使用派生存储（derived）

利用derived创建依赖于obj的存储，当obj更新时自动同步数据：
修改index.svelte的脚本部分：

<script>
    import { derived } from "svelte/store";
    
    export let obj;   
    // 派生存储会自动监听obj的变化，安全提取metadata（可选链避免报错）
    export const objData = derived(obj, ($obj) => $obj?.token?.token?.metadata);
</script>

这样不管obj什么时候被赋值，objData都会自动更新，Attributes.svelte就能正确读取到数据。

方案二：反应式语句手动更新存储

如果偏好普通writable存储，可用反应式语句监听obj变化，手动更新store：
修改index.svelte的脚本部分：

<script>
    import { writable } from "svelte/store";
    
    export let obj;   
    export const objData = writable(undefined);

    // 当obj有值时，更新store内容
    $: if (obj) {
        objData.set(obj.token.token.metadata);
    }
</script>

这种方式会在obj被异步赋值后，立即把metadata存入store，确保下游组件能拿到最新数据。

额外建议 #

在Attributes.svelte读取数据时，最好做空值判断，避免潜在报错：

<script>
  import { objData } from "./index.svelte"
  $: if ($objData) {
    console.log($objData);
  }
</script>

内容的提问来源于stack exchange，提问作者Squiggle7744