Svelte使用Runes时服务端加载数据无法全局在客户端访问的报错解决咨询

嘿，看你在Svelte用Runes做全局数据共享的时候碰到这个报错了，我之前也踩过类似的坑，给你捋捋问题出在哪，还有几个实用的解决办法：

首先说为啥会报这个错：你在shared.svelte.js里写的export let portfolioSummary = $state({});，在Runes的规则里，这种写法会把这个变量包装成只有getter的响应式属性——简单说就是只能读不能直接赋值整个变量，所以你在+page.js里直接portfolioSummary = data.portfolioSummary;就触发了报错。

下面是几个可行的解决思路，你可以根据自己的场景选：

方法一：调整共享变量的声明方式（最直接） #

把共享文件里的代码改成下面这样，用let声明响应式变量再导出，而不是直接export let：

// shared.svelte.js
let portfolioSummary = $state({});
export { portfolioSummary };

然后在+page.js里就可以正常赋值了：

// +page.js
import { portfolioSummary } from '../lib/js/shared.svelte.js';

export async function load({ data }) {
    portfolioSummary = data.portfolioSummary;
}

这样改完之后，portfolioSummary就是一个可读写的响应式变量，任何组件里import它就能直接用，数据变化时UI也会自动更新。

方法二：合并对象属性而非直接替换变量 #

如果你不想改共享文件的代码，也可以在+page.js里用Object.assign把新数据合并到原有的响应式对象里，这样就不会触发赋值报错：

// +page.js
import { portfolioSummary } from '../lib/js/shared.svelte.js';

export async function load({ data }) {
    Object.assign(portfolioSummary, data.portfolioSummary);
}

这个方法适合你只是想更新原有对象的属性，而不是完全替换整个对象的场景，好处是不用动共享文件的代码。

方法三：封装读写接口（适合复杂场景） #

如果想更严谨地控制数据的读写逻辑，可以在共享文件里封装一个带get/set的对象：

// shared.svelte.js
let _portfolioSummary = $state({});
export const portfolioSummary = {
    get value() {
        return _portfolioSummary;
    },
    set value(newData) {
        _portfolioSummary = newData;
    }
};

然后在+page.js里这样赋值：

// +page.js
import { portfolioSummary } from '../lib/js/shared.svelte.js';

export async function load({ data }) {
    portfolioSummary.value = data.portfolioSummary;
}

在组件里使用的时候，就用portfolioSummary.value来访问数据，这种方式能清晰控制数据的修改逻辑，适合复杂的全局数据管理场景。

最后提个小提醒：如果是服务端渲染的项目，要注意全局数据的初始化时机，确保客户端拿到服务端返回的数据后再做修改，避免出现服务端和客户端数据不一致的问题。

备注：内容来源于stack exchange，提问作者16ar